本文针对两个无关联的组件,A组件触发B组件的方法并传值
注意:A、B是兄弟组件,不是父子组件。
1、在vue项目中新建一个js文件(文件名:bus.js)
// 仅针对两个无关联的兄弟组件使用
import Vue from 'vue'
export default new Vue();
2、在需要传值的A页面引用并开始传参
使用Bus.$emit()来进行传值使用 Bus.$emit() 第一个参数为传参的名字 第二个参数为传参值
<script>
import Bus from '../plugins/bus' //路径找到刚刚创建的bus.js
export default {data(){return{value:''}},methods:{sum(){Bus.$emit('summ',this.value) //用Bus.$emit()来传值}}
}
</script>
3、在B页面获取传参的值
用Bus.$on()来接收参数用Bus.$on() 第一个参数为接收的参数名 ,第二个为匿名函数,data表示接收的值
<script>
import Bus from '../plugins/bus' //路径找到刚刚创建的bus.js
export default {data(){return{value:''}},created(){ //在created中使用Bus.$on('summ',(data)=>{ //使用summ的值this.value = data})}}
</script>