<template>
<div id="app">
<v-home></v-home>
<br>
<hr>
<br>
<v-news></v-news>
</div>
</template>
<script>
/*非父子组件传值
1、新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例
2、在要广播的地方引入刚才定义的实例
3、通过 VueEmit.$emit('名称','数据')
4、在接收收数据的地方通过 $om接收广播的数据
VueEmit.$on('名称',function(){
})
*/
import Home from './components/Home.vue';
import News from './components/News.vue';
export default {
data () {
return {
msg:'你好vue'
}
},
components:{ /*前面的组件名称不能和html标签一样*/
'v-home':Home,
'v-news':News
}
}
</script>
<style lang="scss">
</style>
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
我是首页组件
<br>
<button @click="emitNews()">给News组件广播数据</button>
<br>
</div>
</template>
<script>
//引入 vue实例
import VueEvent from '../model/VueEvent.js';
export default{
data(){
return {
msg:'我是一个home组件',
title:'首页111'
}
},methods:{
emitNews(){
//广播数据
VueEvent.$emit('to-news',this.msg)
}
},
mounted(){
//监听news 广播的数据
VueEvent.$on('to-home',function(data){
console.log(data);
})
}
}
</script>
<style lang="scss" scoped>
</style>
<template>
<div id="news">
我是新闻组件
<br>
<button @click="emitHome()">给Home组件广播数据</button>
<br>
</div>
</template>
<script>
//引入 vue实例
import VueEvent from '../model/VueEvent.js';
export default{
data(){
return {
msg:'我是一个新闻组件'
}
},
methods:{
emitHome(){
//广播
VueEvent.$emit('to-home',this.msg)
}
},
mounted(){
VueEvent.$on('to-news',function(data){
console.log(data);
})
}
}
</script>
<style lang="scss" scoped>
</style>
model/VueEvent.js
import Vue from 'vue';
var VueEvent = new Vue()
export default VueEvent;