VUE 父元件子元件間通訊

2021-08-21 09:47:20 字數 1815 閱讀 3184

父元件給子元件傳參,子元件通過prop屬性進行接收

簡單搭建元件部分如下,其中父元素身上有兩個資料,分別是字元型資料1,json型資料2

子元件分別從父元件獲取這兩個資料並展示,其次子元件有自己的資料

子元件通過$emit()事件想父元件發射資料

頁面結構:其中child-a為子元件:

這是父元件

父元件資料1:}

父元件資料2:}

子元素傳送的資料:}

接受子元件資料:}

data資料:

data(),

child:'暫無',

receive:'暫無'}},

child-a:

我是子元素:childa

從父元素處獲取資料1:}

從父元素處獲取資料2:}

childa自己的資料:}

更改父元素的資料1

更改父元素的資料2

將自己的資料傳送給父元素

傳送自己的資料

data資料:

data()

},

由於vue2.x不能直接對從父級獲取的資料進行更改,會報錯,這裡額外給乙個變數,用來存放從父級那裡獲取的msg

mounted(),
child-a裡面設定props,用來存放從父級拿回來的資料:

props:['msg','json'],
注意:在中 屬性名必須與props裡面的一致。

至此,在父級中更改對應的資料,子元件也會發生變化,證明,父元件的資料已經傳遞給了子元件

子元件更改父元件的兩種方法

1.由於不能直接進行更改,所以只能借助自己的資料來更改,如上述例子,更改newmsg即可,但是此時更改,只有子元件裡面發生變化,父元件不變

methods:

}

2.由於async被廢棄,若想在子元件中更改資料同時把父元件中的資料也更改掉,可以將資料以json的格式傳遞,在子元件中可直接對其更改

methods:

}

父元件向子元件的方法,實質上都是通過$emit()時間來傳送,這裡提供兩種使用1.元件上直接通過時間繫結來呼叫

child-a中,進行資料發射:

child-a中,進行資料發射:

transferdata(),

元件通過v-on呼叫:

methods:

}

2.借助新的vue例項將資料掛載在這個新的vue例項上

var tempvm = new vue();
在child-a中:事件名為:childa-data

methods:

}

其他地方通過$on(name,callback)呼叫,此處父元件中:

mounted().bind(this));

},

注意:借助新的vue例項的時候,必須保證這個例項是全域性的。

vue元件間通訊子與父

二 元件間通訊 子元件傳值給父元件 通過事件的方式來完成資料的傳輸。在父元件中 定義乙個方法,用來接收子元件所通過事件傳來的值 methods 繫結事件處理函式 事件一般情況 都是自定義事件 在子元件觸發事件 事件名,值 this.emit myevent myphone 觸發乙個叫做myevent...

Vue元件間的通訊 子傳父

實現方法 子元件向父元件中傳遞訊息通過自定義事件。即子元件通過在自身的事件執行方法中使用this.emit 自定義事件名稱 需要傳遞的內容 這個方法,在元件使用時監聽自定義事件,從而在父元件中處理自定義事件的帶引數的執行方法來進行資訊傳遞。通訊步驟 1 子元件自身觸發事件,在這個事件執行方法中通過呼...

vue元件,父元件與子元件之間通訊

vue元件,元件是乙個可復用的功能模組,即將具有相同功能的模組抽取成乙個元件,在需要的地方引用即可,這體現了 封裝的思想,下面看一下元件是如何實現 定義乙個名為 button counter 的新元件 vue.component button counter template you clicked...