Vue之非父子组件通信
非父子组件传值方法:
1:在model中新建一个js文件 引入Vue 实例化Vue 最后暴露相关实例
// 引入vue
import Vue from 'vue'
// 创建一个空的vue实例
var bus=new Vue()
// 将实例暴露出去
export default bus
2:再要广播的位置和接收广播的位置引入刚刚创建的实例
import Bus from '../model/bus'
3:通过Bus.$emit('广播名称','数据');像兄弟组件广播数据
emitNews(){
//通过Bus.emit向news组件广播(‘名称’,‘数据’) 向news 组件广播数据
Bus.$emit('to-news',this.msg)
}
4:在接收数据的位置通过$on接收广播传来的数据
mounted(){
// 通过Bus.on来接收广播的数据
Bus.$on('to-news',(data)=>{
alert(data)
})
}
实例:
<template>
<div>
<br>
<h2>这是一个首页组件</h2>
<button @click="emitNews()">向News组件广播数据</button>
<hr>
</div>
</template>
<script>
import Bus from '../model/bus'
export default {
data(){
return{
msg:'Yes, a first Page!',
title:'我是的数据NO.1'
}
},
methods:{
emitNews(){
//通过Bus.emit向news组件广播(‘名称’,‘数据’) 向news 组件广播数据
Bus.$emit('to-news',this.msg)
}
}
}
</script>
<style lang="scss" scoped>
h2{
color: red;
}
</style>
<template>
<div>
<h1>这是新闻组件</h1>
</div>
</template>
<script>
import Bus from '../model/bus'
export default {
data(){
return{
aaa:'m,sh'
}
},
methods:{
},
mounted(){
// 通过Bus.on来接收广播的数据
Bus.$on('to-news',(data)=>{
alert(data)
})
}
}
</script>
<style lang="scss" scoped>
h1{
color: skyblue;
}
</style>
OK,Vue之非父子组件传值就总结到这,欢迎各位同仁指点讨论!