组件的通信
一般常见的组件之间的通信有以下几种情况，A和B，B和C，B和D之间都是父子关系，C和D之间是兄弟组件关系。
常用的通信手段有两种：
1.ref：给元素或组件注册引用信息
2.children:访问父级组件和子组件的实例。
这两种方式都是直接通过实例的方式获取的方式。示例如下：
//comA组件A
export default {
data () {
return {
title: '测试通信'
}
},
methods: {
sayHello () {
window.alert('你好');
}
}
}
这里引用组件A
<template>
<comA ref="comA"></comA>
</template>
<script>
export default {
mounted () {
const comA = this.$refs.comA;
console.log(comA.title); // 测试通信
comA.sayHello(); // 调用组件comA的方法
}
}
</script>
上面的例子我们可以看出我们使用ref来获取组件的实例上的方法和数据
<div id="count">
<button @click="showmsg">
显示两个组件的信息
</button>
<child1></child1>
<child2></child2>
</div>
<template id="child1">
<div>
{{ msg }}
</div>
</template>
<template id="child2">
<div>
{{ msg }}
</div>
</template>
<script>
Vue.component('child1', {
template: '#child1',
data () {
return {
msg: '这是子组件1的信息'
}
}
})
Vue.component('child2', {
template: '#child2',
data () {
return {
msg: '这是子组件2的信息'
}
}
})
new Vue({
el: '#count',
data: { },
methods: {
showmsg () {
for(var i = 0; i < this.$children.length; i++) {
alert(this.$children[i].msg)
}
}
}
})
</script>
$children 返回所有子组件的实例，是一个数组
<div id="count">
父组件中的msg: {{ msg }}
<child1 ref='c1'></child1>
<child2 ref='c2'></child2>
</div>
<template id="child1">
<div>
{{ msg }}
<button @click="showpmsg">
显示父组件msg
</button>
</div>
</template>
<template id="child2">
<div>
{{ msg }}
</div>
</template>
<script>
Vue.component('child1', {
template: '#child1',
data () {
return {
