#yyds干货盘点#Vue中的父子组件之间的数据传递之props、$ref和$emit

props是用于父组件向子组件传递数据信息

props是单向绑定的，即只能父组件向子组件传递，不能反向。

<!-- 父组件 -->
    <template>
     <div>
      <h1>我是父组件！</h1>
      <child message="我是子组件一！"></child>
     
      <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
      <child v-bind:message="a+b"></child>
     
      <!-- 用一个变量进行动态赋值。-->
      <child v-bind:message="msg"></child>
     </div>
    </template>
     
    <script>
    import child from '../components/child.vue'
    export default {
     components: {child},
     data() {
      return {
       a:'我是子组件二！',
       b:112233,
       msg: '我是子组件三！'+ Math.random()
      }
     }
    }
    </script>

    <!-- 子组件 -->
    <template>
     <h3>{{message}}</h3>
    </template>
    <script>
     export default {
      props: ['message']
     }
    </script>

通过ref 实现通信

对于ref官方的解释是：ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 refs 对象上。 那应该怎么理解？看看下面的解释：

1. 如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过ref可能获取到在子组件里定义的属性和方法。
2.  如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。

那如何通过ref 实现通信？下面就将上面prop实现的功能，用ref实现一遍：

<!-- 父组件 -->
    
    <template>
      <div>
        <h1>我是父组件！</h1>
        <child ref="msg"></child>
      </div>
    </template>
    
    <script>
      import child from '../components/child.vue'
      export default {
        components: {child},
        mounted: function () {
          console.log( this.$refs.msg);
          this.$refs.msg.getMessage('我是子组件一！')
        }
      }
    </script>

    <!-- 子组件 -->
     
    <template>
     <h3>{{message}}</h3>
    </template>
    <script>
     export default {
      data(){
       return{
        message:''
       }
      },
      methods:{
       getMessage(m){
        this.message=m;
       }
      }
     }
    </script>

这里再补充一点就是，prop和$ref之间的区别： 

1. prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
2. ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。 

通过emit 实现通信

上面两种示例主要都是父组件向子组件通信，而通过emit 实 现 子 组 件 向 父 组 件 通 信 。 对 于 emit 实现子组件向父组件通信。 对于emit实现子组件向父组件通信。对于emit官网上也是解释得很朦胧，也可以这样理解: 

vm.$emit( event, arg )

$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

<!-- 父组件 -->
    <template>
     <div>
      <h1>{{title}}</h1>
      <child @getMessage="showMsg"></child>
     </div>
    </template>
     
    <script>
     import child from '../components/child.vue'
     export default {
      components: {child},
      data(){
       return{
        title:''
       }
      },
      methods:{
       showMsg(title){
        this.title=title;
       }
     }
     }
    </script>

    <!-- 子组件 -->
    <template>
     <h3>我是子组件！</h3>
     <button @click=“submit”>点击</button>
    </template>
    <script>
     export default {
       methods:{
         submit(){
           this.$emit('getMessage', '我是父组件！')
         }
       }
     }
    </script>