欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vuejs第十篇之vuejs父子組件通信

 更新時(shí)間:2016年09月06日 11:29:56   作者:qq20004604  
這篇文章主要介紹了Vuejs第十篇之vuejs父子組件通信的相關(guān)資料,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下

本篇文章是小編結(jié)合官方文檔整理的一套更加細(xì)致,代碼更多更全的教程,非常不錯(cuò),比較適合新手閱讀。

本篇資料來于官方文檔:

http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1

父子組件通信

①訪問子組件、父組件、根組件;

this.$parent 訪問父組件

this.$children 訪問子組件(是一個(gè)數(shù)組)

this.$root 根實(shí)例的后代訪問根實(shí)例

示例代碼:

<div id="app"> 
父組件: 
<input v-model="val"><br/> 
子組件: 
<test :test="val"></test> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
val: 1 
}, 
components: { 
test: { 
props: ['test'], 
template: "<input @keyup='findParent' v-model='test'/>", 
methods: { 
findParent: function () { 
console.log(this.$parent); //訪問根組件 
console.log(this.$parent.val); //訪問根組件的val屬性 
console.log(this.$parent.$children.indexOf(this)); //查看當(dāng)前能否在其父組件的子組件中找到索引 
console.log(this.$parent === this.$root); //查看父組件和根組件是不是全等的(因?yàn)樗母附M件就是根組件) 
} 
} 
} 
} 
}); 
</script>

當(dāng)在子組件的輸入框按鍵彈起時(shí),顯示內(nèi)容依次為:

父組件、父組件的輸入框的值(默認(rèn)情況是1)、0(表示是父組件的children屬性中的第一個(gè)元素)、true(由于父組件就是根組件,所以是全等的);

通過這樣的方法,可以在組件樹中進(jìn)行互動(dòng)。

②自定義事件:

首先,事件需要放置在events屬性之中,而不是放置在methods屬性中(新手很容易犯的錯(cuò)誤),只能觸發(fā)events屬性中的事件,而methods屬性中的事件是無法觸發(fā)的。

其次,向上派發(fā)和向下廣播有所區(qū)別:向上派發(fā)會(huì)觸發(fā)自身同名事件,而向下廣播不會(huì);

第三,向上派發(fā)和向下廣播默認(rèn)只會(huì)觸發(fā)直系(子或者父,不包括祖先和孫)的事件,除非事件返回值為true,才會(huì)繼續(xù)在這一條線上繼續(xù)。

第四,事件不能顯式的通過 this.事件名 來調(diào)用它。

示例代碼:

<div id="app"> 
父組件: 
<button @click="parentClick">點(diǎn)擊向下傳播broadcast</button> 
<br/> 
子組件1: 
<children1></children1> 
<br/> 
另一個(gè)子組件1: 
<another-children1></another-children1> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
val: 1 
}, 
methods: { 
parentClick: function () { 
this.$broadcast("parentClick", "abc"); 
} 
}, 
events: { 
childrenClick: function () { 
console.log("childrenClick-Parent"); 
}, 
parentClick: function () { 
console.log("parentClick-Parent"); 
return true; 
} 
}, 
components: { 
children1: { //這個(gè)無返回值,不會(huì)繼續(xù)派發(fā) 
props: ['test'], 
template: "<button>children1</button></br>子組件2:<children2></children2>", 
events: { 
childrenClick: function () { 
console.log("childrenClick-children1"); 
}, 
parentClick: function (msg) { 
console.log("parentClick-Children1"); 
console.log("message:" + msg); 
} 
}, 
components: { 
children2: { 
props: ['test'], 
template: "<button @click='findParent'>children-Click</button>", 
methods: { 
findParent: function () { 
this.$dispatch('childrenClick'); 
} 
}, 
events: { 
childrenClick: function () { 
console.log("childrenClick-children2"); 
}, 
parentClick: function (msg) { 
console.log("parentClick-Children2"); 
console.log("message:" + msg); 
} 
} 
} 
} 
}, 
anotherChildren1: { //這個(gè)是返回值為true,會(huì)繼續(xù)向子組件的子組件派發(fā) 
props: ['test'], 
template: "<button>anotherChildren1</button></br>另一個(gè)子組件2:<another-children2></another-children2>", 
events: { 
childrenClick: function () { 
console.log("childrenClick-anotherChildren1"); 
return true; 
}, 
parentClick: function (msg) { 
console.log("parentClick-anotherChildren1"); 
console.log("message:" + msg); 
return true; 
} 
}, 
components: { 
anotherChildren2: { 
props: ['test'], 
template: "<button @click='findParent'>anotherChildren2-Click</button>", 
methods: { 
findParent: function () { 
this.$dispatch('childrenClick'); 
} 
}, 
events: { 
childrenClick: function () { 
console.log("childrenClick-anotherChildren2"); 
}, 
parentClick: function (msg) { 
console.log("parentClick-anotherChildren2"); 
console.log("message:" + msg); 
} 
} 
} 
} 
} 

} 
}); 
</script> 
}, 
parentClick: function () { 
console.log("parentClick-anotherChildren2"); 
} 
} 
} 
} 
} 

} 
}); 
</script> 

說明:

【1】點(diǎn)擊父組件的按鈕,會(huì)向下廣播,然后觸發(fā)子組件1本身,另外一個(gè)子組件1,以及另一個(gè)子組件2;

【2】點(diǎn)擊子組件2的按鈕,會(huì)觸發(fā)子組件2的事件和子組件1的事件,但不會(huì)觸發(fā)父組件的按鈕;

【3】點(diǎn)擊另一個(gè)子組件2的按鈕,會(huì)觸發(fā)另一個(gè)子組件2的事件,另一個(gè)子組件1的事件和父組件的事件(因?yàn)榱硪粋€(gè)子組件1的事件的返回值為true);

③使用v-on綁定自定義事件:

【1】簡(jiǎn)單來說,子組件觸發(fā)某個(gè)事件(events里的方法)時(shí),父組件也會(huì)執(zhí)行某個(gè)方法(父組件methods里的方法)。

【2】觸發(fā)的綁定寫在模板之中(即被替換的那個(gè)template模板中),可以多個(gè)子組件的事件綁定一個(gè)父組件的方法,或者不同子組件的事情綁定不同父組件的方法,但是不能同一個(gè)子組件事件綁定多個(gè)父組件的方法。

【3】子組件派發(fā)消息傳遞的參數(shù),即使子組件的事件沒有參數(shù),也不影響將參數(shù)傳遞給父組件的方法(即父組件的方法可以接受到子組件方法獲取的參數(shù))

如示例:

<div id="app"> 
父組件: 
<button>點(diǎn)擊向下傳播broadcast</button> 
<br/> 
子組件1: 
<!--綁定寫在這里,可以多個(gè)綁定同一個(gè),或者不同綁定不同的,但不能一個(gè)綁定多個(gè)--> 
<children v-on:test="parent" @test2="another"></children> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
val: 1 
}, 
methods: { 
parent: function (arg) { 
console.log(arg); 
console.log("the first method with test event"); 
}, 
another: function () { 
console.log("another method"); 
} 
}, 
components: { 
children: { //這個(gè)無返回值,不會(huì)繼續(xù)派發(fā) 
props: ['test'], 
template: "<button @click='childClick'>children1</button></br><button @click='childClick2'>children1</button>", 
methods: { 
childClick: function () { 
this.$emit("test", 'the argument for dispatch'); 
}, 
childClick2: function () { 
this.$emit("test2"); 
} 
}, 
events: { 
test: function () { 
console.log("test"); 
}, 
test2: function () { 
console.log("test2"); 
} 
} 
} 
} 
}); 
</script>

④子組件索引

簡(jiǎn)單來說:就是可以直接從索引獲取到子組件,然后就可以調(diào)用各個(gè)子組件的方法了。

添加索引方法是:在標(biāo)簽里添加v-ref:索引名

調(diào)用組件方法是:vm.$ref.索引名

也可以直接在父組件中使用this.$ref.索引名

這個(gè)時(shí)候,就可以獲得組件了,然后通過組件可以調(diào)用他的方法,或者是使用其數(shù)據(jù)。

示例代碼:

<div id="app"> 
父組件: 
<button @click="todo">觸發(fā)子組件的事件</button> 
<br/> 
子組件1: 
<!--綁定寫在這里,可以多個(gè)綁定同一個(gè),或者不同綁定不同的,但不能一個(gè)綁定多個(gè)--> 
<children v-ref:child></children> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
methods: { 
todo: function () { 
this.$refs.child.fromParent(); //通過索引調(diào)用子組件的fromParent方法 
} 
}, 
components: { 
children: { //這個(gè)無返回值,不會(huì)繼續(xù)派發(fā) 
props: ['test'], 
template: "<button>children1</button>", 
methods: { 
fromParent: function () { 
console.log("happened fromParent by ref"); 
} 
} 
} 
} 
}); 
</script>

以上所述是小編給大家介紹的Vuejs第十篇之vuejs父子組件通信,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • vue2.0與vue3.0及vue與react的區(qū)別及說明

    vue2.0與vue3.0及vue與react的區(qū)別及說明

    這篇文章主要介紹了vue2.0與vue3.0及vue與react的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 新手簡(jiǎn)單了解vue

    新手簡(jiǎn)單了解vue

    Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架。Vue.js 的目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。下面我們來簡(jiǎn)單了解下吧
    2019-05-05
  • vue cli4.0 如何配置環(huán)境變量

    vue cli4.0 如何配置環(huán)境變量

    這篇文章主要介紹了vue cli4.0 如何配置環(huán)境變量,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • vue的一個(gè)分頁組件的示例代碼

    vue的一個(gè)分頁組件的示例代碼

    本篇文章主要介紹了vue的一個(gè)分頁組件的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-12-12
  • Vue 短信驗(yàn)證碼組件開發(fā)詳解

    Vue 短信驗(yàn)證碼組件開發(fā)詳解

    Vue.js(讀音 /vju&#720;/, 類似于 view)是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的庫。這篇文章主要介紹了Vue 短信驗(yàn)證碼組件開發(fā)詳解,需要的朋友可以參考下
    2017-02-02
  • vue.config.js中配置Vue的路徑別名的方法

    vue.config.js中配置Vue的路徑別名的方法

    這篇文章主要介紹了vue.config.js中配置Vue的路徑別名的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • 關(guān)于vue-treeselect的基本用法

    關(guān)于vue-treeselect的基本用法

    vue-treeselect?是一個(gè)多選組件,具有對(duì)?Vue.js嵌套選項(xiàng)支持,這篇文章主要介紹了關(guān)于vue-treeselect的基本用法,需要的朋友可以參考下
    2022-11-11
  • 如何用vue3+Element?plus實(shí)現(xiàn)一個(gè)完整登錄功能

    如何用vue3+Element?plus實(shí)現(xiàn)一個(gè)完整登錄功能

    要實(shí)現(xiàn)用戶的登錄功能,可以使用Vue3和Element?Plus,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3和Element?Plus組件庫實(shí)現(xiàn)一個(gè)完整的登錄功能,文中提供了詳細(xì)的代碼示例,需要的朋友可以參考下
    2023-10-10
  • vue任意關(guān)系組件通信與跨組件監(jiān)聽狀態(tài)vue-communication

    vue任意關(guān)系組件通信與跨組件監(jiān)聽狀態(tài)vue-communication

    這篇文章主要介紹了vue任意關(guān)系組件通信與跨組件監(jiān)聽狀態(tài)vue-communication,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • Vue核心概念A(yù)ction的總結(jié)

    Vue核心概念A(yù)ction的總結(jié)

    今天小編就為大家分享一篇關(guān)于Vue核心概念A(yù)ction的總結(jié),小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧
    2019-01-01

最新評(píng)論