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

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

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

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

本篇資料來于官方文檔:

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

父子組件通信

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

this.$parent 訪問父組件

this.$children 訪問子組件(是一個數組)

this.$root 根實例的后代訪問根實例

示例代碼:

<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)); //查看當前能否在其父組件的子組件中找到索引 
console.log(this.$parent === this.$root); //查看父組件和根組件是不是全等的(因為他的父組件就是根組件) 
} 
} 
} 
} 
}); 
</script>

當在子組件的輸入框按鍵彈起時,顯示內容依次為:

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

通過這樣的方法,可以在組件樹中進行互動。

②自定義事件:

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

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

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

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

示例代碼:

<div id="app"> 
父組件: 
<button @click="parentClick">點擊向下傳播broadcast</button> 
<br/> 
子組件1: 
<children1></children1> 
<br/> 
另一個子組件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: { //這個無返回值,不會繼續(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: { //這個是返回值為true,會繼續(xù)向子組件的子組件派發(fā) 
props: ['test'], 
template: "<button>anotherChildren1</button></br>另一個子組件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】點擊父組件的按鈕,會向下廣播,然后觸發(fā)子組件1本身,另外一個子組件1,以及另一個子組件2;

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

【3】點擊另一個子組件2的按鈕,會觸發(fā)另一個子組件2的事件,另一個子組件1的事件和父組件的事件(因為另一個子組件1的事件的返回值為true);

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

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

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

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

如示例:

<div id="app"> 
父組件: 
<button>點擊向下傳播broadcast</button> 
<br/> 
子組件1: 
<!--綁定寫在這里,可以多個綁定同一個,或者不同綁定不同的,但不能一個綁定多個--> 
<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: { //這個無返回值,不會繼續(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>

④子組件索引

簡單來說:就是可以直接從索引獲取到子組件,然后就可以調用各個子組件的方法了。

添加索引方法是:在標簽里添加v-ref:索引名

調用組件方法是:vm.$ref.索引名

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

這個時候,就可以獲得組件了,然后通過組件可以調用他的方法,或者是使用其數據。

示例代碼:

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

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

相關文章

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

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

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

    新手簡單了解vue

    Vue.js是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。下面我們來簡單了解下吧
    2019-05-05
  • vue cli4.0 如何配置環(huán)境變量

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

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

    vue的一個分頁組件的示例代碼

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

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

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

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

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

    關于vue-treeselect的基本用法

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

    如何用vue3+Element?plus實現一個完整登錄功能

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

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

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

    Vue核心概念Action的總結

    今天小編就為大家分享一篇關于Vue核心概念Action的總結,小編覺得內容挺不錯的,現在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2019-01-01

最新評論