msg: '这是子组件1的信息'
}
},
methods: {
showpmsg () {
alert(this.$parent.msg)
}
}
})
Vue.component('child2', {
template: '#child2',
data () {
return {
msg: '这是子组件2的信息'
}
}
})
new Vue({
el: '#count',
data: {
msg: 'hello parent'
}
})
</script>
这两种方式是基于组件的上下文环境访问到父组件或者全部子组件（数组）。这种方式有很大的弊端是，无法跨级或兄弟间进行通信，比如如下的结构
// parent.vue
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
我们假如想在组件A中获取其他组件那么我们可能需要使用vuex或者和Bus事件总线的方式进行解决。
事件总线
定义事件总线的方式有以下两种
// bus.js 事件总线import Vue from 'vue'
export const $bus = new Vue()
// main.js我们再main入口中定义这个事件总线
Vue.prototype.$bus = new Vue()
发送事件
对下面comA说明，会接收来自父组件的参数number，并显示出来；有个按钮，点击会调用函数handleAddRandom，生成一个随机数，并调用事件总线的$emit方法，将随机数给事件总线，由事件总线进行数据传递。
<template>
<div>
{{number}}
<button @click="handleAddRandom">随机增加</button>
</div>
</template><script>
import $bus from ../bus.js
export default {
name: "counter",
props: {
number: {
type: Number
}
},
methods: {
handleAddRandom() {
const num = Math.floor(Math.random() * 100 + 1);
console.log("生产的num:" + num);
this.$bus.$emit('add', num);
}
}
}
</script>
接收事件
<template>
<div>
随机增加:
<counter :number="number"></counter>
</div>
</template><script>
import counter from './counter'
export default {
name: "index",
components: {
counter
},
data() {
return {
number: 0
}
},
methods: {
handleAddRandom(num) {
this.number += num;
}
},
created() {
//this.$bus.$on需要在created中使用，否则不会生效
this.$bus.$on('add', this.handleAddRandom);
},
beforeDestroy() {
//需要在beforeDestroy中移除
