vuejs父子組件通信的問題
更新時(shí)間：2017年01月11日 16:46:24 作者：lhy031
本篇文章主要介紹了vue父子組件通信 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
父子組件之間可以通過props進(jìn)行通信：
組件的定義：
1.創(chuàng)建component類：
var Profile = Vue.extend({
template: "<div>Lily</div>";
})
2.注冊一個(gè)tagnme:
Vue.component("me-profile",Profile);//全局注冊
局部注冊：
var vm = new Vue({
el: "#todo",
components: {
"my-profile": Profile
},
...
}
模板注意事項(xiàng)：
因?yàn)?Vue 就是原生的DOM，所以有些自定義標(biāo)簽可能不符合DOM標(biāo)準(zhǔn)，比如想在 table 中自定義一個(gè) tr，如果直接插入 my-component 不符合規(guī)范，所以應(yīng)該這樣寫：
<table> <tr is="my-component"></tr> </table>
在子組件中有一個(gè)this.$parent和this.$root可以用來方法父組件和跟實(shí)例。（但是不推薦）
Vue中子組件可以通過事件和父組件進(jìn)行通信。向父組件發(fā)消息是通過this.$dispatch,而向子組件發(fā)送消息是通過this.$boardcast,這里都是向所有的父組件和子組件發(fā)送消息。
子組件:
props: {
url: {
type: Array,
default: function() {
return []
}
}
}，
methods: {
add: function() {
this.$dispatch("add", this.input); //這里就是向父組件發(fā)送消息
this.input = "";
}
}
父組件：
data() {
return {
url: .....
}
}，
events: {
add: function(input) {
if(!input) return false;
this.list.unshift({
title: input,
done: false
});
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3項(xiàng)目中reset.scss模板使用導(dǎo)入
這篇文章主要為大家介紹了Vue3項(xiàng)目中reset.scss模板使用導(dǎo)入示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
Vue組件通信中非父子組件傳值知識點(diǎn)總結(jié)
在本篇文章里小編給大家整理的是關(guān)于Vue組件通信中非父子組件傳值知識點(diǎn)總結(jié)，有興趣的朋友們學(xué)習(xí)下。2019-12-12
vue實(shí)現(xiàn)加載頁面自動觸發(fā)函數(shù)(及異步獲取數(shù)據(jù))
這篇文章主要介紹了vue實(shí)現(xiàn)加載頁面自動觸發(fā)函數(shù)(及異步獲取數(shù)據(jù))，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue高德地圖繪制行政區(qū)邊界功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡單分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue使用axios實(shí)現(xiàn)動態(tài)追加數(shù)據(jù)
在vuejs中使用axios時(shí),有時(shí)候需要追加數(shù)據(jù),比如,移動端下拉觸底加載,分頁加載,滑動滾動條等,下面小編就來為大家介紹一下如何使用使用axios實(shí)現(xiàn)動態(tài)追加數(shù)據(jù)吧2023-10-10
Pinia進(jìn)階setup函數(shù)式寫法封裝到企業(yè)項(xiàng)目
這篇文章主要為大家介紹了Pinia進(jìn)階setup函數(shù)式寫法封裝到企業(yè)項(xiàng)目實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
el-input無法輸入的問題和表單驗(yàn)證失敗問題解決
在做項(xiàng)目的時(shí)候發(fā)現(xiàn)一個(gè)情況,輸入框無法輸入值并且表單校驗(yàn)失靈,所以下面這篇文章主要給大家介紹了關(guān)于el-input無法輸入的問題和表單驗(yàn)證失敗問題解決的相關(guān)資料,需要的朋友可以參考下2023-02-02![vue文件代碼縮進(jìn)以及格式化代碼方式[自定義]](http://img.jbzj.com/images/xgimg/bcimg8.png)
這篇文章主要介紹了vue文件代碼縮進(jìn)以及格式化代碼方式[自定義],具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
基于Vue2.0和Typescript實(shí)現(xiàn)多主題切換的示例
本文主要介紹了基于Vue2.0和Typescript實(shí)現(xiàn)多主題切換的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04