bus（总线传值-非父子间传值）
Posted xl4ng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bus（总线传值-非父子间传值）相关的知识，希望对你有一定的参考价值。
bus.js
import Vue from ‘vue‘
export default new Vue
App.vue
<template>
<div id="app">
<button @click="passMsg">传你</button>
<my-parent></my-parent>
</div>
</template>
<script>
import bus from "./util/bus";
import MyParent from "./views/Parent";
export default {
components: {
MyParent
},
methods: {
passMsg() {
bus.$emit("msg", "i am from app");
}
}
};
</script>
<style>
</style>
Child.vue
<template>
<div>
<h2>Child--{{childMsg}}</h2>
</div>
</template>
<script>
import bus from "../util/bus";
export default {
data() {
return {
childMsg: ""
};
},
mounted() {
bus.$on("msg", val => {
this.childMsg = val;
});
}
};
</script>
<style>
</style>
以上是关于bus（总线传值-非父子间传值）的主要内容，如果未能解决你的问题，请参考以下文章
Vue非父子组件传值(Bus/总线/发布订阅模式/观察者模式)