vue子組件向父組件傳值

原理：

父組件向子組件傳方法，子組件想辦法調用改方法（通過 this.$emit(）觸發父組件穿過來的方法），把子組件的數據當做該方法的參數傳遞進去，父組件就拿到了實參，得到了數據

 

（子組件每當點擊自己身上的button按鈕，就會觸發自己身上的myclick事件，在自身myclick方法里面通過 this.$emit('func', this.sonmsg)可以觸發父組件傳過來的func方法）

 

父向子傳方法：

 <div id="app">
    <!-- 父組件向子組件 傳遞 方法，使用的是 事件綁定機制； v-on, 當我們自定義了 一個 事件屬性之后，那么，子組件就能夠，通過某些方式，來調用 傳遞進去的 這個 方法了 -->
    <com2 @func="show"></com2>
  </div>

   var vm = new Vue({
      el: '#app',
      data: {
        datamsgFormSon: null
      },
      methods: {
        show(data) {
          // console.log('調用了父組件身上的 show 方法: --- ' + data)
          // console.log(data);
          this.datamsgFormSon = data
        }
      },

子觸發該方法

 <div>
      <h1>這是 子組件</h1>
      <input type="button" value="這是子組件中的按鈕 - 點擊它，觸發 父組件傳遞過來的 func 方法" @click="myclick">
    </div>

 methods: {
        myclick() {
          // 當點擊子組件的按鈕的時候，如何 拿到 父組件傳遞過來的 func 方法，並調用這個方法？？？
          //  emit 英文原意： 是觸發，調用、發射的意思
          // this.$emit('func123', 123, 456)
          this.$emit('func', this.sonmsg)
        }
      }

子組件觸發該方法的時候通過傳參的形式，向父組件傳了實參，父組件就接收到了子組件穿過來的數據