网站制作的文章免费推广工具

回答思路：1.组件通信的目的–>2.组件通信的分类–>3.组件通信的方案

1.组件通信的目的

每个组件之间都有自己独自的作用区域，组件之间的数据是无法共享的，但在实际开发工作中，我们常常需要让座组件之间共享数据，这也是组件通信的目的

2.组件通信的分类

组件间通信的分类可分为以下：
1.父子组件之间的通信
2.兄弟组件之间的通信
3.祖孙与后代组件之间的通信
4.非关系组件之间的通信

3.组件通信的方案

（1）通过props传递数据

1.适用场景：父组件传递数据给子组件
2.组件设置props属性，定义接收父组件传过来的参数
3.父组件在使用子组件标签中通过字面量来传递值
children.vue:

props:{name:Stringage:{type:Number,default:18,require:true	}
}

father.vue:

<children name="tom" age=18>

（2）$emit触发自定义事件

1.适用场景：子组件传递数据给父组件

2.子组件通过$emit触发自定义事件，
$emit第二个参数为传递的值

3.父组件绑定监听器获取到子组件传过来的参数
children.vue:

this.$emit('add',1)

father.vue:

<children @add="numAdd($event)" />

（3）ref

1.适用场景：子组件传递数据给父组件

2.父组件通过设置子组件ref来获取数据
father.vue:

<children ref="foo">
<div>this.$refs.foo</div>

（4）EventBus

1.适用场景:兄弟组件传值

2.创建一个中央事件总线EventBus

3.兄弟组件通过$emit触发自定义事件，第二个参数传递的值

4.另一个兄弟组件通过$on监听自定义事件

// 
class Bus { constructor() { this.callbacks = {}; // 事件的名字} $on(name, fn) { this.callbacks[name] = this.callbacks[name] || []; this.callbacks[name].push(fn); } $emit(name, args) { if (this.callbacks[name]) { this.callbacks[name].forEach((cb) => cb(args)); } } 
} // main.js 
Vue.prototype.$bus = new Bus() // 将$bus挂载到 vue实例的原型上 
// 另一种方法
Vue.prototype.$bus = new Vue() // Vue已经实现了 Bus的功能

children1.vue:

this.$bus.$emit('foo')`在这里插入代码片`

children2.vue:

this.$bus.$on('foo',2)

（5）parent、root

通过共同祖辈$parent或者
$root搭建通信桥

兄弟组件：

this.$parent.on('add',this.add)

另一个兄弟组件：

this.$parent.emit('add')

（6）attrs与listeners

1.适用场景：祖先传递数据给子孙

2.设置批量向下传属性$attrs和
$listeners

3.class,style等非props属性也是通过$attrs可以将父组件中的这些特定绑定属性传递给子组件

4.可以通过v-bind="$attrs"传入内部组件

// child：没有在 props中声明 foo 
<p>{{$attrs.foo}}</p> // parent 
<HelloWorld foo="foo"/>

// 给Grandson隔代传值 
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2> // Child2 的儿子
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson> // Grandson 中
<div @click="$emit('some-event', 'msg from grandson')"> 
{{msg}} 
</div>

（7）provide与inject

1.在祖先组件定义Provide属性返回传递的值

2.在后代组件通过inject接收组件传递过来的值
祖先组件：

<!-- 祖先组件 -->
<template><div><child-component></child-component></div>
</template><script>
export default {provide: {message: 'Hello from ancestor',count: 10},components: {ChildComponent}
}
</script>

后代组件：

<!-- 后代组件 -->
<template><div><p>{{ message }}</p><p>{{ count }}</p></div>
</template><script>
export default {inject: ['message', 'count']
}
</script>

（8）vuex

1.适用场景：复杂关系的组件数据传递
2.vuex作用相当于一个用来存储共享变量的容器
3.state用来存放共享变量的地方
3.getter：可以增加一个getter派生状态，相当于store中的计算属性，用来获得共享变量的值
4.mutations用来存放修改state的方法
5.actions也是用来存放修改state的方法，在mutations的基础上进行，常用来做一些异步操作

小结

1.父子数据传递：props，$emit,ref

1.1：父传子：props
1.2：子传父：$emit、ref 

2.兄弟数据传递：eventbus，$parent

3.祖孙与后代数据传递：attrs与listeners或provide与inject

4.复杂关系数据传递：vuex