主要操作技能:
Home.vue / News.vue 不是父子关系
* 非父子组件传值
* 1.新建一个js文件,然后引入vue, 实例化vue, 最后暴露给这个实例==> VueEvent.js
*
* 2.在要广播的地方引入实例 import VueEvent from '../model/VueEvent.js'
*
* 3.通过VueEvent.$emit(名称,数据) VueEvent.$emit('to-news', this.msg);
*
* 4.在接受数据上通过$on接受广播数据
*
* mounted() {
//监听news广播数据
VueEvent.$on('to-news', function(data) {
console.log(data);
})
}
编写代码:
VueEvent.js
import Vue from 'vue'
var VueEvent=new Vue()
export default VueEvent;
Home.vue
<template>
<!--所以的内容多要被根节点包含起来 -->
<div id="home">
<h3>首页组件</h3><br />
<button @click="emitNews()">给新闻主播数据</button>
</div>
</template>
<script>
//引入Vue实例
import VueEvent from '../model/VueEvent.js'
export default {
data() { //数据
return {
msg: 'I am home component!'
}
},
methods: {
//广播数据
emitNews() {
//子组件可以使用 $emit 触发父组件的自定义事件。
//vm.$emit( event, arg ) //触发当前实例上的事件
VueEvent.$emit('to-news', this.msg);
}
},
mounted() { //生命周期函数
//监听news广播数据
VueEvent.$on('to-home', function(data) {
console.log(data);
})
}
}
</script>
News.vue
<template>
<div id="news">
<h2>我是新闻组件</h2><br />
<button @click="emitHome">给首页广播数据</button>
</div>
</template>
<script>
//引入vue实例
import VueEvent from '../model/VueEvent.js'
export default {
data() {
return {
msg: '我是新闻组件哦!'
}
},
methods: {
//广播数据
emitHome() {
VueEvent.$emit('to-home', this.msg);
}
},
mounted() {
//监听home广播数据
//vm.$on( event, fn );//监听event事件后运行 fn;
VueEvent.$on('to-news', function(data) {
console.log(data);
})
}
}
</script>
<style>
</style>
效果:
将首页组件”的数据传给“新闻组件”
将新闻组件”的数据传给“首页组件”