vue之非父子组件传值
如何进行非父子组件传值,下面举例说明。
比如说有两个兄弟组件要进行传值,我们把这两个兄弟组件当做两个城市,一个是home城市,一个news城市。我们把传值当做发送快递。
我们想要发送快递就的有一辆专门的快递车,来帮助我们传递快递,并且要求这辆快递车是可以全国都可以跑的,也就是说我们需要定义一个Vue的实例对象,这个Vue实例对象就是我们的快递车。
有了快递车,我们发送的时候需要叫快递车过来我们这里拿邮件,所以我们必须在home里引入这个快递车,也就是Vue实例对象。然后把我们的快递打包写上我们的名字装到快递车里,然后通过 $emit 发送给news。
news也需要引入快递车来接收快递,通过 $on 指定接受的快递名称来接收数据。
这样就实现了非父子组件的传值。
示例:Home组件给News组件传值
1.首先,我们需要打造一辆快递车,我们在 src目录下创建一个model目录来存放我们的车工场。车工场名称随意,在这里我们命名为 VueEvent.js ,这里车工场就是用来生产快递车。
a.创建车工场
b.在车工场里生产快递车
// VueEvent.js文件
import Vue from 'vue';
var VueEvent = new Vue();
export default VueEvent
// 通过vue实例化出一个名称VueEvent对象,这个VueEvent就是我们的快递车;
// export default VueEvent 将VueEvent实例暴露,也就是把我们的快递车投入到使用中。如果不暴露的话,大伙就不能使用。
2. 在Home组价里操作
a. 先引入这个快递车到home里,也就是引入VueEvent这个对象
// 在script标签里引入
import VueEvent from '../model/VueEvent.js'
b. 我们给home中的一个button按钮绑定一个事件。
<template>
<div>
首页组件
<br>
<button @click="emitNews()">给news组件广播数据</button>
</div>
</template>
c. 我们定义一个emitNews方法,当按钮点击时执行方法。
<script>
import VueEvent from '../model/VueEvent.js'
export default {
name:"home",
data(){
return {
msg:"我是一个home组件",
}
},
methods:{
emitNews(){
VueEvent.$emit('to-news',this.msg)
}
},
}
</script>
// emitNews方法中,我们通过快递车 VueEvent 的包裹 $emit,将我们的数据 this.msg 放入里面并贴上标签 to-news.
// 当该方法执行时,快递车就会把这个快递给我们邮走,快递车会一直在全国广播这,这个快件的名臣,各组件都在一直监听着 ,如果是自己想要的快件就直接告诉快递车拿过来
3. 在News组件里操作
a.我们也需要引入快递车,不管是发送还是接受都需要这个快递车,所以第一步我们先引入。
// script标签里
import VueEvent from '../model/VueEvent.js'
b. 因为快递车发快件的方式是广播,也就是说只有一只监听才可以知道有没有我们想要的这快件,所以我们要在 mounted 这个监听钩子里写代码。
<script>
import VueEvent from '../model/VueEvent.js'
export default {
name:"news",
data(){
return {
msg:"我是一个news组件",
}
},
mounted() {
VueEvent.$on('to-news',(data)=>{
console.log(data);
})
},
}
</script>
// 在mounted函数里会一直监听,监听 VueEvent 这两车,如果有广播,则通过 $on 来接收快件,要接收的快件名为 to-news ,data就是我们的快件里的数据
4. 我们验证一下,实验中,我们写了双向的传值,就是home可以给news组件传值,news可以给home传值,道理都是一样的。