1. 程式人生 > >vue2.0元件之間的通訊

vue2.0元件之間的通訊

VUE 父子元件的傳值部分

一.父元件向子元件傳值

1.建立子元件,在src/components/資料夾下新建一個Child.vue


2.Child.vue的中建立props,然後建立一個名為message的屬性

3.在App.vue中註冊Child元件,並在template中加入child標籤,標籤中新增message屬性並賦值.

二.子元件向父元件傳值

1.在子元件中建立一個按鈕,給按鈕繫結一個點選事件

2.在響應該點選事件的函式中使用$emit來觸發一個自定義事件,並傳遞一個引數

sendMessageToParent: function () {

         this.$emit(‘ListenTochild’,‘this is a message from child’)

}

3.在父元件中的子標籤中監聽該自定義事件並新增一個響應該事件的處理方法

 

4.儲存修改的檔案,在瀏覽器中點選按鈕