vue父子組件之間傳值

父組件向子組件傳值

1.父組件傳遞

在父組件頁面中引用子組件的標籤上使用v-bind（簡寫爲:）綁定須要傳遞的值

<comment-box :id="id"></comment-box>

2.子組件接收

在子組件的vue實例中使用props接收父組件傳遞過來的值

export default {
    data(){},
    props: ['id']
}

子組件向父組件傳值

1.父組件綁定事件

• 父組件定義一個處理從子組件傳過來的值的函數

export default {
    methods: {
        getSelectedCount(value){
            //函數內部處理從子組件傳過來的值
        }
    }
}

• 在父組件頁面中引用子組件的標籤上綁定這個處理函數

<numberbox @getcount="getSelectedCount"></numberbox>

2.子組件處理事件

• 子組件是一個輸入框，爲其綁定change事件，監聽value值的改變，併爲其添加ref屬性，方便取到該輸入框的value值

<input class="mui-input-numbox" type="number" value="1" @change="countChanged" ref="number"/>

• 定義該change事件的處理函數，使用this.$emit觸發父組件爲子組件綁定的函數，並把父組件須要的值傳過去

export default {
    methods: {
        countChanged(){ 
            this.$emit('getcount',parseInt(this.$refs.number.value))
         }
    }
}