兄弟组件【非父子组件】之间的传值
这就麻烦喽，咳咳我现在学到的地方麻烦而已，后面就不麻烦了；第一步，先滚过去新建一个js文件重新 写一个vue实例并暴露出去；
/src/model/vueEvent.js
import Vue from 'vue
var VueEvent = new Vue;
export default VueEvent;
第二步， 在需要广播的地方引入刚刚的实例 【我是从home向news中广播数据】，并利用 VueEvent.$emit('名称','值') 广播出该事件VueEvent可换
Home.vue
<template>
<div id="home">
<!-- 头部组件引入 -->
这是home组件
<button @click="abc()">给News广播</button>
</div>
</template>
<script>
import Head from "./Head.vue";
import VueEvent from "../model/vueEvent.js"
export default {
data() {
return {
b:false
,todata:'这是home组件的值'
,mvc:'溜溜留'
};
},
methods: {
//向news广播
abc(){
// 广播数据
VueEvent.$emit('to-news',this.todata)
}
}
};
</script>
<style scoped>
</style>
第三步 ，在需要的组件中 接收 广播来的数据 【注意要引入实例化的vue】.利用 $on 写在,mouted(){ }中
News.vue
<template>
<div id="news">
这是news组件
</div>
</template>
<script>
import VueEvent from "../model/vueEvent.js";
export default {
data() {
return {
b: false,
a: "这是news组件的值",
};
},
methods: {
// 广播数据
}
,mounted(){ //在组件加载的时候就接收
VueEvent.$on("to-news", function(e){
console.log(e)
}); //接收数据
}
};
</script>
<style>
</style>
页:
[1]