Vue父子组件通信实现方式——Props和$emit

一、Props的使用

在Vue组件中，父组件向子组件传递数据可以通过Props来实现，Props是子组件中的属性。可以在子组件中定义Props，来接收来自父组件的数据。在父组件中使用v-bind指令将数据绑定到Props上。下面是一个例子：

// 子组件
Vue.component('child-component', {
  props: ['message'],  // 声明Props
  template: '
  
{{ message }}
  
'
});

// 父组件
new Vue({
  el: '#app',
  data: {
    parentMessage: 'Hello, child component!'
  }
});
<div id="app">
  <child-component v-bind:message="parentMessage"></child-component>
</div>

在子组件中，通过props选项来声明接收父组件传递下来的数据。在v-bind指令中，将父组件的数据绑定到子组件的Props上。在子组件的template中，使用Props来渲染数据。

二、事件和$emit的使用

除了通过Props从父组件向子组件传递数据，还可以通过事件来实现子组件向父组件传递数据。在子组件中，可以使用Vue实例的$emit方法来触发一个自定义事件，同时可以将数据作为参数传递给该事件。在父组件中，使用v-on指令来监听该事件，并且可以获取子组件传递的数据。下面是一个例子：

// 子组件
Vue.component('child-component', {
  template: '<button v-on:click="emitEvent">Send Message</button>',
  methods: {
    emitEvent: function() {
      this.$emit('send-message', 'Message from Child Component!');
    }
  }
});

// 父组件
new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    receiveMessage: function(msg) {
      this.message = msg;
    }
  }
});
<div id="app">
  <child-component v-on:send-message="receiveMessage"></child-component>
  {{ message }}
</div>

在子组件中，在按钮的click事件中通过$emit方法触发了一个名为"send-message"的自定义事件，并且将数据"Message from Child Component!"作为参数传递给该事件。在父组件中，使用v-on指令来监听名为"send-message"的自定义事件，并且在接收到该事件时调用了receiveMessage方法来接收子组件传递的数据。

三、Prop验证和默认值

为了保证子组件能够正确处理从父组件传递过来的数据，在子组件中可以对Props进行验证，并且可以为Props设置默认值。下面是一个例子：

Vue.component('child-component', {
  props: {
    propA: Number,
    propB: [String, Number],
    propC: {
      type: String,
      required: true
    },
    propD: {
      type: Number,
      default: 100
    },
    propE: {
      type: Object,
      default: function() {
        return { message: 'default message' }
      }
    }
  }
});

在子组件中，对Props进行了如下设置：

• propA必须是一个数字类型
• propB必须是一个字符串或者数字类型
• propC必须是一个字符串类型，并且是必须传递的参数
• propD必须是一个数字类型，并且默认值为100
• propE必须是一个对象类型，并且默认值为{ message: 'default message' }

当父组件向子组件传递数据时，如果传递的数据类型不符合子组件的设置，则会在开发模式下抛出警告。而如果传递的数据类型符合子组件的设置，但是没有传递propC时，则会在开发模式下抛出错误。同时，在使用默认值时，传递的数据也必须符合子组件类型的设置。

四、Prop的单向数据流

最后需要注意的是，Props的数据流是单向的，也就是说，父组件向子组件传递数据是有效的，子组件无法修改Props传递过来的数据。如果需要修改Props的值，则需要在父组件中进行操作，并且子组件可以通过在父组件中触发事件来请求修改Props的值。这样可以保证数据的单向流动，避免复杂的数据改变引起的混乱。