组件通信一般都是父与子/子与父,而Vue当中,又有一个Bus的概念,即:兄弟组件之间间的通信
1.父组件与子组件之间的通信
以我们的vue-cli3.0搭建的架子为例:可以看到,views/Home.vue之内,调用了一个子组件,即:HelloWorld.vue,并且通过属性传值,把一个名为msg的变量传递给了子组件(HelloWorld.vue),值为"Welcome to Your Vue.js App"
不难发现,我们要实现父组件与子组件之间的组件通信,我们需要这几个步骤:
1.1.父组件以import的形式引入子组件
//views/Home.vue
import HelloWorld from '@/components/HelloWorld.vue'
1.2.以components的形式注册组件(components是局部注册组件,注册后只能在当页调用。)
//views/Home.vue
export default {
components: {
HelloWorld
}
}
1.3.在调用子组件(HelloWorld)的时候,通过属性传值,把一个值为"Welcome to Your Vue.js App"的数据传递了过去,且数据名称为msg
//views/Home.vue
<HelloWorld msg="Welcome to Your Vue.js App"/>
1.4.子组件(HelloWorld.vue)接收父组件传递过来的数据
//components/HelloWorld.vue
export default {
props: { //用props 属性接收
msg:String //msg变量
},
mounted( ) {
//此时,我们利用mounted生命周期输出msg
console.log('父组件传递过来的数据是--->>>',this.msg) //得到的值为Welcome to Your Vue.js
}
}
2.子组件与父组件之间的通信
以上代码缕清之后,我们会很容易的理解,父与子的通信。那么子与父的通信又该如何实现呢?一般情况(很多教程)说,子与父的通信,就是子组件把一个处理结果返回给父组件(return回去),为什么要这样说呢? 看这里: 大家想象一下,如果是单纯的子组件向父组件传递一个死数据,我们是没有必要通过子组件传递给父组件的,因为此时完全可以在父组件内写死即可,根本不用麻烦子组件传递,子传递给父=>必定是子组件经过处理之后的一个数据 (个人理解) ,只有这样,我们才会使用子到父的通信过程,以HelloWorld子组件为例,我们想实现子组件与父组件的通信,我们需要以下几个步骤:
2.1在父组件内部定义一个用于接收子组件传递过来数据的方法(做好接收准备)
//views/Home.vue
methods: {
getChildMsg(childMsg){
console.log('子组件传递过来的数据为--->>>',childMsg)
}
}
2.2调用子组件的时候,通过事件传递,把方法(getChildMsg)传递给子组件,且事件名为setMsg
//views/Home.vue
<HelloWorld msg="Welcome to Your Vue.js App" @setMsg = 'getChildMsg'/>
2.3子组件通过$emit把经过处理的数据,返回给父组件
//components/HelloWorld.vue
mounted( ) {
//这里,仅仅是个例子,在mounted钩子内触发这个事件,这个事件,我们也可以用click/change/watch/computed之类的事件触发
this.sendOutput( )
},
methods: {
sendOutput( ) {
//通过$emit方法,把 '子组件的数据' 字符串传递给父组件
this.$emit('setMsg','子组件的数据')
}
}
此时,我们看控制台,就可以看到父组件(Home.vue)已经成功的输出子组件传递过来的数据了
3.Bus:兄弟组件传值
首先:我们先说要实现的功能,父组件同时调用HelloWorld组件和Hello组件,HelloWorld组件通过事件触发,把一个数据传递给兄弟组件(Hello组件)
//views/Home.vue 引入并调用Hello组件
import Hello from '@/components/Hello.vue'
components: {
HelloWorld,Hello
}
<Hello/>
3.1.定义Bus
//src/bus.js 新建bus
import Vue from 'vue'
export default new Vue( )
3.2HelloWorld组件发送数据给兄弟组件
//components/HelloWorld.vue
1.引入Bus
import Bus from '@/bus.js'
2.增加一个按钮触发事件
<button @click='bus'>兄弟们,跟你们说件事</button>
3.通过事件发送数据
methods: {
bus( ) {
Bus.$emit('msg', '兄弟们,你们好,my name is HelloWorld')
}
}
3.3Hello组件接收兄弟组件传递过来的数据
//components/Hello.vue
mounted( ) {
Bus.$on('msg', (e) => {
console.log(e)
})
}
此时,我们点击HelloWorld组件内部的按钮,把数据发送出去之后,控制台就会输出Hello组件接收到的数据,这样,我们就实现了通过Bus进行兄弟组件之间的通信了
至此,Vue组件通信介绍完毕