vue子組件向父組件傳值

要弄懂子組件如何向父組件傳值，需要理清步驟

 子組件向父組件傳值的步驟

　　一：子組件在組件標簽上通過綁定事件的方式向父組件發射數據

　　　　

　　<!--html-->
<template id="ccp">
      <div>
        <button v-for='item of options' @click = 'sonclick(item)'>
        {{item.name}}        
        </button>
      </div>
  </template>                

　　

 // 子組件的methods項目下
                sonclick(item) {
                    console.log('我向父組件發射了一個事件', item.name);
                    this.$emit('getson', item) // 子組件向發射事件, 
                        //參數1:規定必須父組件使用的事件類型,
                        // 參數2: 向父組件發射的數據

                }

　　　說明：

　　　　1：在子組件上綁定事件，在子組件的methods上定義這個函數

　　　　2：在這個函數內部使用 this.$emit方法用於向父組件發射數據

　　　　3： 參數1：要求父組件自定義的事件；參數2：要向父組件發射的數據內容

　　二：父組件接收子組件發射的數據

　　　　

<!-- vue實例下 -->
    <div id="app">
        <cpn @getson='times'></cpn>      
    </div>

　　父組件使用v-on + 子組件的規定的事件名綁定一個函數來操作從子組件傳遞過來的數據   @getSonFnName = ''xxx''

 // vue實例的methods下
                times(item) {
                    console.log(item.id)
                }

 　　說明：

　　　　1：父組件通過子組件規定的事件名來創建一個函數，並接收子組件傳遞的數據

　　　　2：在父組件定義的函數內部可以處理子組件的數據

　　　　3：由於子組件沒有瀏覽器對象，所以定義函數時不用加參數，默認就是子組件傳遞的數據

　　　　4：v-on用於在父組件綁定子組件規定的事件類型，因而v-on也可以綁定自定義事件

 這樣，就理解了vue子組件向父組件傳值的過程。

以上。