1.父組件傳遞數(shù)據(jù)給子組件

思路：在父組件中定義inputValue屬性，然后再props接收參數(shù)
注意此方法是傳遞的動(dòng)態(tài)數(shù)據(jù)，在父組件接收時(shí)需要應(yīng)用：（v-bind的簡(jiǎn)寫）接收
代碼如下：

父組件

<template>
  <div>
    <input type="text" v-model="msg">
    <br>
    //將子控件屬性inputValue與父組件msg屬性綁定
    <child :inputValue="msg"></child>
  </div>
</template>
<style>

</style>
<script>
  export default{
    data(){
      return {
        msg: '請(qǐng)輸入'
      }
    },
    components: {
      child: require('./Child.vue')
    }
  }
</script

子組件

<template>
  <div>
    <p>{{inputValue}}</p>
  </div>
</template>
<style>

</style>
<script>
    export default{
        props: {
          inputValue: String
        }
    }
</script>

2.子組件向父組件傳遞
（1）子組件$emit，父組件v-on
思路：子組件使用$emit,$('自定義的事件名稱',需要傳遞的參數(shù)),在父組件中v-on:自定義事件的名稱=“接收到參數(shù)后的方法”

代碼如下：

父組件

<template>
  <div>
//message為子控件上綁定的通知；recieveMessage為父組件監(jiān)聽到后的方法
    <child2 v-on:message="recieveMessage"></child2>
  </div>
</template>
<script>
  import {Toast} from 'mint-ui'
  export default{
    components: {
      child2: require('./Child2.vue'),
      Toast
    },
    methods: {
      recieveMessage: function (text) {
        Toast('監(jiān)聽到子組件變化'+text);
      }
    }
  }
</script>

子組件

<template>
  <div>
    <input type="text" v-model="msg" @change="onInput">
  </div>
</template>
<script>
  export default{
    data(){
      return {
        msg: '請(qǐng)輸入值'
      }
    },
    methods: {
      onInput: function () {
        if (this.msg.trim()) {
          this.$emit('message', this.msg);
        }
      }
    }
  }
</script>