金山老师的笔记14.组件之间的通信
组件与组件之间是可以互相通信的。包括父子组件之间、兄弟组件之间等等，都可以互相通信。 下面只讨论父子组件之间通信问题。
14.1.子组件获取父组件数据
在vue中，组件实例的作用域是孤立的，默认情况下，父子组件的数据是不能共享的，也就是说，子组件是不能直接访问父组件的数据的。为此，vue给我们提供了一个数据传递的选项prop，用来将父组件的数据传递给子组件。具体使用如下：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<sub-component msg="张翼德"></sub-component>
<sub-component msg="曹操"></sub-component>
</div>
<template id="btncounter">
<div>
hello {{msg}}
</div>
</template>
<script>
//子组件
let subComponent = {
template: '#btncounter',
props: ['msg'],
data() {
return {}
},
methods: {
counter() {
this.num++;
}
}
}
var vm = new Vue({
el: '#app',
data: {
msg: 'parent'
},
components: {
subComponent
}
});
</script>
</body>
</html>上面实例中，子组件获取父组件传递的数据的步骤为：
- 在子组件标签中，声明 msg 属性，属性值即为父组件向子组件传递的值。
- 在子组件中，使用props选项，声明接收父组件向子组件传递值的载体，即 ‘msg’ 。
- 子组件中就可以使用 msg 获取父组件向子组件传递的值了。
也可以使用 v-bind 绑定子组件标签属性，这样就可以将父组件data数据传递个子组件了。
14.2.父组件获取子组件数据
和上面不一样的是，父组件想要获取子组件的数据时，需要子组件通过emit主动将自己的数据发送给父组件。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<sub-component msg="张翼德" @getnum="getNum"></sub-component>
<sub-component msg="曹操" @getnum="getNum2"></sub-component>
第一个的数据{{firstNum}} <br/>
第二个的数据{{secondNum}}
</div>
<template id="btncounter">
<div>
hello {{msg}}
<button @click="counter">{{num}}</button>
</div>
</template>
<script>
//子组件
let subComponent = {
template: '#btncounter',
props: ['msg'],
data() {
return {
num:1
}
},
methods: {
counter() {
this.num++;
this.$emit('getnum',this.num)
}
}
}
var vm = new Vue({
el: '#app',
data: {
firstNum:0,
secondNum:0,
msg: 'parent'
},
components: {
subComponent
},
methods:{
getNum(num){
this.firstNum = num;
// alert('事件被调用'+num)
},
getNum2(num){
this.secondNum = num;
// alert('事件被调用'+num)
}
}
});
</script>
</body>
</html>首先，我们需要在子组件中触发一个主动发送数据的事件，上面的例子中是一个点击事件send；其次，在点击事件中使用emit方法，这个emit接收两个参数：传递数据的事件和需要传递的数据，这个传递数据的事件也是自定义的；然后在父组件中引用子组件，并在引用的子组件中使用on监听上一步传递数据的事件，上面的例子中是childmsg；最后在父组件中使用这个事件，这个事件带有一个参数，就是从子组件发送过来的数据。
