<template>
<div id="app">
<v-home></v-home>
<br>
<hr>
<br>
<v-news></v-news>
</div>
</template>
<script>
/*非父子組件傳值
一、新建一個js文件 而後引入vue 實例化vue 最後暴露這個實例
二、在要廣播的地方引入剛纔定義的實例
三、經過 VueEmit.$emit('名稱','數據')
四、在接收收數據的地方經過 $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>
import Vue from 'vue';
var VueEvent = new Vue()
export default VueEvent;