1-3 vue组件-父子组件通信

代码链接：https://github.com/yuanxiaorui/vue-study/blob/master/guide/vue%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A101-%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6.html

1、 父组件向子组件通信

props -> 如果我们想使父组件的数据，则必须先在子组件中定义props属性

注意：在子组件中定义prop时，使用了camelCase命名法。由于HTML特性不区分大小写，camelCase的prop用于特性时，需要转为 kebab-case（短横线隔开）。例如，在prop中定义的myName，在用作特性时需要转换为my-name。

 var Child = {
     template:'
{{myName}}
', 
     props:{ 
        myName:{type: String } 
     } 
 }

 var app = new Vue({ 
     el: '#app', 
     components: { 
         Child 
     }, 
     data: {
         msg: '我是父组件的msg' 
     } 
 })
 

     // 将父组件数据通过已定义好的props属性传递给子组件 
     

使用$children可以在父组件中访问子组件实例

 //父组件中
 mounted() { console.log(this.$children)}

2、子组件向父组件通信

父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件。

 var Child = {
     template: '
',
     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 
         }
     }
 })

方法二：使用$parent可以从一个子组件访问父组件的实例。

//子组件中：
mounted() {  console.log(this.$parent) }