组件间通信的方案
整理vue
中8种常规的通信方案
-
通过 props 传递
-
通过 $emit 触发自定义事件
-
使用 ref
-
EventBus
-
parent 或root
-
attrs 与 listeners
-
Provide 与 Inject
-
Vuex
props传递数据
-
适用场景:父组件传递数据给子组件
-
子组件设置
props
属性,定义接收父组件传递过来的参数 -
父组件在使用子组件标签中通过字面量来传递值
Children.vue props:{ // 字符串形式 name:String // 接收的类型参数 // 对象形式 age:{ type:Number, // 接收的类型为数值 defaule:18, // 默认值为18 require:true // age属性必须传递 } }
Father.vue
组件
<Children name="jack" age=18 />
$emit 触发自定义事件
-
适用场景:子组件传递数据给父组件
-
子组件通过
$emit触发
自定义事件,$emit
第二个参数为传递的数值 -
父组件绑定监听器获取到子组件传递过来的参数
Chilfen.vue this.$emit('add', good) Father.vue <Children @add="cartAdd($event)" />
小结
-
父子关系的组件数据传递选择
props
与$emit
进行传递,也可选择ref
-
兄弟关系的组件数据传递可选择
$bus
,其次可以选择$parent
进行传递 -
祖先与后代组件数据传递可选择
attrs
与listeners
或者Provide
与Inject
-
复杂关系的组件数据传递可以通过
vuex
存放共享的变量