<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;