Vue读书笔记：关于$ref、props和$emit

1.props实现父组件向子组件传递数据

子组件可以通过props接收到来自父组件的数据，并且是单向绑定的。也就是说，数据不能从子组件反向传递。

2.$ref实现子组件向父组件通信

来自官方非常难理解的解释：

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

意思就是，如果ref用在子组件上，是作为子组件的一个索引，通过$ref可以获取到子组件里面的属性和方法。如果ref在dom元素上面使用，可以通过ref获取到该dom的属性集合。

通过$ref实现通信：

 

<template>
    <div>
        <h1>这是父组件</h1>
        <Child ref="msg"/>
    </div>
</template>

<script>
   import Child from '@/views/Child';
   export default{
      components:{Child},
      mounted(){
　　　　　　 console.log(this.$ref.msg);//可以获取到子组件的属性和方法
           this.$ref.msg.getMessage('这是子组件');
        },
    }
</script>

 

<template>
     <h2>{{message}}</h2>
</template>

<script>
   export default{
    　data(){
　　　　　　message:'',
　　　　},
　　　methods:{
　　　　getMessage(m){
　　　　　　this.message = m;
　　　　},
　　　},
   }
</script>

prop和$ref的区别是：

prop是用于父组件向子组件传递数据。

$ref着重于子组件的索引，带领父组件查找到子组件的属性和方法，并不适合用来做数据之间的通信。

3.$emit和$ref的区别

我的理解是，$ref是父组件向子组件索要子组件的属性和方法，而$emit是子组件告知父组件调用父组件的方法并可以从子组件传递参数到父组件。