方案一(最简单兄弟组件传参解决方案):
- 原理:使用一个空的 Vue 实例作为“中转站”,进行发送和接收数据。
1、在main.js中添加
- new一个空的Vue实例,并将其挂载在原型上
Vue.prototype.bus=new Vue();
2、ComponentA组件中
<template>
<div class="wrapper">
<h3>这里是组件A</h3>
<button @click="sendData">向组件B发送参数</button>
</div>
</template>
<script>
export default {
data() {
return {
Amsg:'我是来自ComponentA组件中的参数'
};
},
methods:{
sendData(){
//此处为核心代码
this.bus.$emit('sendMsg',this.Amsg)
}
}
};
</script>
2、ComponentB组件中
<template>
<div class="wrapper">
<h3>这里是组件B</h3>
{{BMsg}}
</div>
</template>
<script>
export default {
data() {
return {
BMsg: ""
};
},
created() {
//此处为核心代码,涉及到ES6箭头函数
this.bus.$on("sendMsg", val => this.BMsg = val);
}
};
</script>
方案二:
与方案一相比方案二代码更繁琐,不推荐使用。下方已经列出代码不同之处
1、新建bus.js文件
import Vue from 'vue'
export default new Vue
2、ComponentA组件中
import bus from '.../bus.js'
bus.$emit('sendMsg',this.Amsg)
3、ComponentB组件中
import bus from '.../bus.js'
this.bus.$on("sendMsg", val => this.BMsg = val);
方案三:
如果数据量大而杂,则可以使用VueX,我将在后续文章中举例其使用方法。