Vue父子组件通信

父子组件通信时Vue组件通信最常见的方式

一、父组件到子组件通信

​ 父组件到子组件的通讯主要为：子组件接受使用父组件的数据，这里的数据包括属性和方法。

• Props

  Props是我们使用的最多的向子组件传递数据的方式

  ​ 官网中有说，HTML的 attribute 属性名是不区分大小写的，浏览器会将所有的字符都转化为小写字符，所以我们在使用驼峰式命名的props名是，就需要使用 "-" 来连接了，不然就会报错，无法绑定数据。

  props 可以静态传值，也可以动态传值。值可以是字符串、数字、数组、布尔值、对象

  prop 的类型检查 type 可以是：

  ​ String、Number、Array、Object、Boolean、Date、Function、Symbol 类型，还可以是一个自定义的构造函数

父传子案例：

  <div id="app">
    <!-- 加载父组件模板 -->
    <father></father>
  </div>
  <!-- 父组件向子组件传递的数据，子组件不要轻易修改，应当将数据存放到一个变量中，对变量进行修改 -->

  <template id="father">
    <div>
      <h2>父组件模板</h2>
      
      <!-- 导入子组件模板 -->
      <!-- vue规定不允许属于驼峰命名 -->
      <!-- <son :receiverFatherData="fatherMsg"></son>   -->
      <!-- 获取到父组件的fatherMsg数据，绑定在receiver-father-data上 -->
      <son :receiver-father-data="fatherMsg"></son>
    </div>
  </template>

  <template id="son">
    <div>
      <h3>子组件模板</h3>
      <!-- 使用从父组件接收到的数据 -->
      <p>子组件中使用父组件的数据fatherMsg：{{receiverFatherData}}</p>
    </div>
  </template>

  <script src="js/vue.js"></script>
  <script>

    // 子组件
    const son = {
      template: "#son",
      data() {
        return {
          sonMsg: "我是子组件的数据"
        }
      },
      // 使用props，父组件传输数据到子组件
      props: {
        receiverFatherData: {
          // 数据的类型检查，多种类型时可以使用数组，undefined和null会通过所有类型的检查
          type: String,
          // 数据的默认值
          default: "来自父组件的数据",
          // 规定数据必须被使用
          required: true
        }
      }
    }

    // 父组件
    const father = {
      template: "#father",
      data() {
        return {
          fatherMsg: "我是父组件的数据"
        }
      },
      components: {
        son
      }
    }

    const app = new Vue({
      el: "#app",
      components: {
        father
      }
    })
  </script>

单向数据流：

​ 在 Vue 中，所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定

​ 单向数据流就是只能从上往下流，不能逆流，props 就是上下之间的一个接口，让数据能够从上往下流

二、子组件到父组件通信

​ 子组件向父组件通信，使用 $emit 方法，它是 Vue 的一个实例方法。

​ $emit(): 触发当前实例上的事件。附加参数都会传给监听器回调。

​ 这里我使用 $emit() 方法，定义一个事件传送数据.

子组件到父组件通信案例：

  <div id="app">
    <!-- 加载父组件模板 -->
    <father ></father>
  </div>

  <template id="father">
    <div>
      <h2>父组件模板</h2>
      <p>接收到子组件中的数据sonMsg：{{msg}}</p>

      <!-- 导入子组件模板 -->
      <!-- trans是$emit()方法定义的自定义事件，我们在父组件中定义一个receiverSonData方法来接收自定义事件传递的数据 -->
      <!-- 注意：这里的自定义事件名，一定要注意 名字一定要与 $emit里面的自定义事件名相同
          要么都是小写的 trans,要么都是带 '-' 连接的 tr-ans,否则数据传输失败,
        例如，$emit('trAns',this.msg),这里是@tr-ans，这样写浏览器虽然没有报错，但是数据也没有传输成功-->
      <son @tr-ans="receiverSonData"></son>
    </div>
  </template>

  <template id="son">
    <div>
      <h3>子组件模板</h3>
      <!-- 使用子组件中定义的事件，以便发送数据 -->
      <button @click="transfer">向父组件传输数据</button>
    </div>
  </template>

  <script src="js/vue.js"></script>
  <script>

    // 子组件
    const son = {
      template: "#son",
      data() {
        return {
          sonMsg: "我是子组件的数据"
        }
      },
      methods: {
        transfer () {
          // trans,自定义事件名,相对于click事件.
          // 第二个参数是数据，会被发送到自定义事件的对象中去
          this.$emit("tr-ans",this.sonMsg);
        }
      },
    }

    // 父组件
    const father = {
      template: "#father",
      data() {
        return {
          fatherMsg: "我是父组件的数据",
          msg: ""
        }
      },
      methods: {
        // 定义方法接收子组件数据，使用参数msg接收$emit发射过来的数据
        // $emit()方法会直接帮我们把数据发送过来，我们只需要定义一个参数接收
        receiverSonData (msg) {
          // 在父组件中定义一个变量来接收
          this.msg = msg;
          console.log("数据:" + msg)
        }
      },
      components: {
        son
      }
    }

    const app = new Vue({
      el: "#app",
      components: {
        father
      }
    })
  </script>