Vue组件通信之父子组件通信、兄弟组件通信

组件通信一般都是父与子/子与父，而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在父组件内部定义一个用于接收子组件传递过来数据的方法(做好接收准备)

扫描二维码关注公众号，回复： 6555529 查看本文章

//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组件通信介绍完毕

Vue组件通信之父子组件通信、兄弟组件通信

猜你喜欢