父元件：

<template>
  <div class="parent">
    <div>我是父元件，給子元件傳值（傳：我是父元件）----{{msg2}}</div>
    <!--在子元件上v-on來監聽該事件，有變化則呼叫exportMsg方法-->
    <transmit-child :child-msg="msg" v-on:clickMsg="exportMsg"></transmit-child>
  </div>
</template>

<script
 
>
import child from '@/components/child'
export default {
  name: 'parent',
  data () {
    return {
      arr: [1, 2, 3, 4],
      msg: '我是父元件',
      msg2: ''
    }
  },
  components: {
    'transmit-child': child
  },
  methods: {
    exportMsg (childValue) {
      console.log('fu')
      this.msg2 =
 
 childValue
    }
  }
}
</script>

子元件：

<template>
  <div class="child">
    <div>我是子元件</div>
    <div>{{childMsg}}</div>
    <button @click="transmit">通過事件向父元件傳遞訊息</button>
  </div>
</template>

<script>
export default {
  name: 'child'
 
,
  data () {
    return {
      msg: '我是子元件'
    }
  },
  //  props是元件的一個單獨選項，不能寫在data中
  props: ['childMsg'],
  methods: {
    transmit () {
      console.log('zi')
      //  事件名稱（'clickMsg'）和需要傳遞給父元件的值(msg)
      this.$emit('clickMsg', this.msg)
    }
  }
}
</script>

• 父元件傳遞資料給子元件。是通過子元件設定props選項中自定義屬性來接收來自父元件的資料。父元件中子元件的地方使用v-bind:自定義屬性（該屬性必須為子元件的props的值）父元件傳值則為v-bind:自定義屬性（該屬性必須為子元件的props的值）=‘父元件需要傳的值’。
• 子元件通過事件觸發向父元件傳遞訊息。擷取子元件methods方法程式碼如下：

 methods: {
    transmit () {
      console.log('zi')
      //  事件名稱（'clickMsg'）和需要傳遞給父元件的值(msg)
      this.$emit('clickMsg', this.msg)
    }
  }

點選子元件，執行transmit方法，進而執行了this.$emit('clickMsg', this.msg)方法。第一個引數為事件名稱，第二個引數為子元件中需要傳遞給父元件的值。在父元件中子元件的地方使用v-on:clickMsg="exportMsg"來監聽子元件的事件觸發。一旦觸發，則會執行父元件中的exportMsg方法，方法程式碼如下：

  methods: {
    exportMsg (childValue) {
      console.log('fu')
      this.msg2 = childValue
    }
  }

this.$emit('clickMsg', this.msg)中的this.msg會傳遞給childValue進而達到傳值的目的。
注意：v-on:clickMsg="exportMsg "方法後不要加括號，更不要寫括號裡還寫引數的形式。因為子元件一般是要傳值給父元件的，需要傳值，只在父元件的methods方法中定義方法時，寫帶引數的形式即可，子元件傳遞過來的值會傳給引數的。而在v-on:clickMsg="exportMsg "方法後加括號，則必須寫傳給引數的值，而該值必須為父元件中已經定義的data中得值，這裡非常重要，雖可以這麼寫，但是，我們可以在方法中用this.來引用data中得值