父子双向通信 & ref

一、父子组件的双向通信

官方文档prop原理说明

• 基本数据类型 子组件直接修改 父组件传递的props vue会抛出警告，所以只能修改引用数据类型。（用于简单的父子双向通信）

（1）首先：父组件传一个对象（引用数据类型）给子组件

（2）然后：子组件用props接收

（3）最后：子组件修改这个对象的值，父组件会同步更新，从而实现双向通信

二、ref

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

（1）ref 标记在普通的元素标签上，获取到的是dom元素

      <h3 ref="name">姓：{{firstName}}</h3>

• 调用

      mounted() {
        console.log(this.$refs.name);
      }

效果图

（2）ref 标记在子组件上，获取到的是组件实例，可以使用子组件的数据以及方法

       <S ref="son"></S>

• 调用

      mounted() {
        this.$refs.son.say();
      }

效果图

每日额外

（1）通过get请求给后台传递参数，后台收到的参数都是字符串类型