1、 父组件向子组件通信
props -> 如果我们想使父组件的数据，则必须先在子组件中定义props属性
注意：在子组件中定义prop时，使用了camelCase命名法。由于HTML特性不区分大小写，camelCase的prop用于特性时，需要转为 kebab-case（短横线隔开）。例如，在prop中定义的myName，在用作特性时需要转换为my-name。
var Child = {
template:'<div>{{myName}}</div>',
props:{
myName:{type: String }
}
}
var app = new Vue({
el: '#app',
components: {
Child
},
data: {
msg: '我是父组件的msg'
}
})
<div id="app">
// 将父组件数据通过已定义好的props属性传递给子组件
<Child :my-name="msg"></Child>
</div>
使用$children可以在父组件中访问子组件实例
//父组件中
mounted() { console.log(this.$children)}
2、子组件向父组件通信
父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件。
var Child = {
template: '<div><button @click="clickEvent"></button></div>',
data() {
return {
childMessage:'我是来自子组件的message'
}
},
methods: {
clickEvent() {
this.$emit('getchildmsg',this.childMessage)
}
}
}
var vm = new Vue({
el:'#app',
components:{ Child },
methods: {
getChildMsgFun(msg) {
console.log('msg:',msg) //我是来自子组件的message
}
}
})
<child v-on:getchildmsg="getChildMsgFun"></child>
方法二：使用$parent可以从一个子组件访问父组件的实例。
//子组件中：
mounted() { console.log(this.$parent) }
