一、小结
- 父子关系的组件数据传递选择 props 与 emit进行传递,也可选择ref
- 兄弟关系的组件数据传递可选择bus,其次可以选择parent进行传递
- 祖先与后代组件数据传递可选择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)" />
ref
- 父组件在使用子组件的时候设置ref
- 父组件通过设置子组件ref来获取数据
父组件
<Children ref="foo" />
this.$refs.foo // 获取子组件实例,通过子组件实例我们就能拿到对应的数据
EventBus
- 使用场景:兄弟组件传值
- 创建一个中央事件总线EventBus
- 兄弟组件通过 e m i t 触发自定义事件, emit触发自定义事件, emit触发自定义事件,emit第二个参数为传递的数值
- 另一个兄弟组件通过$on监听自定义事件
Bus.js
import Vue from 'vue'
const eventBus = new Vue()
export default eventBus
Children1.vue
import bus from "@/components/eventBus";
data() {
return {
searchValue: "",
};
},
methods: {
onSearch() {
bus.$emit('searchValue',this.searchValue)
},
Children2.vue
import bus from "@/components/eventBus";
methods: {
getSearchValue() {
bus.$on('searchValue',(message) =>{
console.log("组件1传过来的值:",message)
})
}
},