（一）Vue 组件通信方式之props、$emit

props： props可以是数组或对象，用于接收来自父组件通过v-bind传递的数据。
$emit： 父子组件通信时，会使用 $emit来触发父组件v-on在子组件上绑定相应事件的监听。
代码示例
**父向子传值：**父组件通过 :msgParent ="msg"将父组件 msg值传递给子组件，当父组件的 input 标签输入时，子组件p标签中的内容就会相应改变。
子向父传值：父组件通过@getmsg="getmsgs"在子组件上绑定了 getmsg事件的监听，子组件 input 标签输入时，会触发 getmsg回调函数， 通过this.$emit('getmsg', this.msg)将子组件 msg的值赋值给父组件 msgChild ，改变父组件p标签的内容。

// 子组件代码
<template>
  <div class="childbox">
    <h4>这是子组件</h4>
    <input type="text" v-model="msg" @keyup="send" />
    <p>收到来自父组件的消息：{{ msgParent }}</p>
  </div>
</template>
<script>
export default {
  name: 'Childs',
  props: ['msgParent '],  // 通过props接收父组件传过来的消息
  data() {
    return {
      msg: '',
    }
  },
  methods: {
    send() {
      this.$emit('getmsg', this.msg)  // 通过 $emit触发getmsg事件，调用父组件中getmsgs回调，并将this.msg作为参数
    },
  },
}
</script>

// 父组件代码
<template>
  <div class="parentbox">
    <h3>这是父组件</h3>
    <input type="text" v-model="msg" />
    <p>收到来自子组件的消息：{{ msgChild }}</p>
    <Childs :msgParent ="msg" @getmsg="getmsgs" />
  </div>
</template>
<script>
import Childs from './Childs'
export default {
  name: 'Parent',
  data() {
    return {
      msg: '',
      msgChild : '',
    }
  },
  components: {
    Childs,
  },
  methods: {
    getmsgs(msg) {
      this.msgChild = msg
    },
  },
}
</script>