一、父组件传值给子组件
- 使用
props
传值(官方推荐)。 - 使用
data-*="xxx"
的属性,数据将自动添加到子组件的根元素。 - 使用$refs直接操作子组件的数据。
- slot插槽(用于模板内容的传递)
二、子组件传值给父组件
通过props传值的方式是单向的,即父组件的属性变化时将会传到给子组件,但反过来就不能。子组件如果改变props的值,vue将会在console发出警告。
- 通过自定义事件$emit传值: 在子组件定义事件,然后通过$emit派发出去,父组件监听子组件的事件并获取参数。
- 使用
.sync
修饰符,在vue2.3.0以后.sync修饰符实质上是一个$emit事件的语法糖,emit的事件名称是update:xx
。(xx表示自定义事件的名称,具体请看官网)。 - 使用v-model进行双向绑定,官网。
三、非父子组件间通信
- 使用空的Vue实例作为事件的总栈,官网。
- Vuex全局状态管理。
「一键投喂 软糖/蛋糕/布丁/牛奶/冰阔乐!」
(๑>ڡ<)☆谢谢老板~
使用微信扫描二维码完成支付
