vue父子組件通信的高級用法示例
更新時間：2019年08月29日 08:28:35 作者：我的小熊不見了
這篇文章主要給大家介紹了關于vue父子組件通信的高級用法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
前言
vue項目的一大亮點就是組件化。使用組件可以極大地提高項目中代碼的復用率，減少代碼量。但是使用組件最大的難點就是父子組件之間的通信。
子通信父
父組件
<template>
<div class="parent">
我是父組件
<!--父組件監(jiān)聽子組件觸發(fā)的say方法，調用自己的parentSay方法-->
<!--通過:msg將父組件的數(shù)據(jù)傳遞給子組件-->
<children :msg="msg" @say="parentSay"></children>
</div>
</template>
<script>
import Children from './children.vue'
export default {
data () {
return {
msg: 'hello, children'
}
},
methods: {
// 參數(shù)就是子組件傳遞出來的數(shù)據(jù)
parentSay(msg){
console.log(msg) // hello, parent
}
},
// 引入子組件
components:{
children: Children
}
}
</script>
子組件
<template>
<div class="hello">
<div class="children" @click="say">
我是子組件
<div>
父組件對我說：{{msg}}
</div>
</div>
</div>
</template>
<script>
export default {
//父組件通過props屬性傳遞進來的數(shù)據(jù)
props: {
msg: {
type: String,
default: () => {
return ''
}
}
},
data () {
return {
childrenSay: 'hello, parent'
}
},
methods: {
// 子組件通過emit方法觸發(fā)父組件中定義好的函數(shù)，從而將子組件中的數(shù)據(jù)傳遞給父組件
say(){
this.$emit('say' , this.childrenSay);
}
}
}
</script>
子組件使用$emit方法調用父組件的方法，達到子通信父的目的。
父通信子
父組件
<!--Html-->
<template>
<!--父組件觸發(fā)click方法-->
<div class="parent" @click="say">
我是父組件
<!--通過ref標記子組件-->
<children ref="child"></children>
</div>
</template>
<script>
import Children from './children.vue'
export default {
data () {
return {
msg: "hello,my son"
}
},
methods: {
// 通過$refs調用子組件的parentSay方法
say(){
this.$refs.child.parentSay(this.msg);
}
},
// 引入子組件
components:{
children: Children
}
}
</script>
子組件
<template>
<div class="hello">
<div class="children" >
我是子組件
<div>
父組件對我說：{{msg}}
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: ''
}
},
methods: {
// 父組件調用的JavaScript方法parentSay
parentSay(msg){
this.msg = msg;
}
}
}
</script>
父組件通過 $refs 調用子組件的方法。
以上就是父子組件通信的方式，父子組件傳遞數(shù)據(jù)直接用props，或者使用 $emit 和 $refs 依靠事件來傳遞數(shù)據(jù)。
父子組件通信提升篇
上文中，子通信父是在 子中觸發(fā)點擊事件 然后調用父組件的方法，父通信子是在 父中觸發(fā)點擊事件 調用子組件的方法。但是實際情況中可能存在 子通信父時子組件不允許有點擊事件 而事件在父中或者 父通信子時點擊事件在子組件 中。
子通信父時擊事件在父組件
這種情況其實很常見，例如提交一個表單時表單的內容為子組件，而保存按鈕在父組件上。此時點擊保存按鈕想要獲取子組件表單的值。這種情況下已經(jīng)不單單是子通信父和父通信子了，需要將兩者結合在一起使用才能完成整個通信過程。
實現(xiàn)的思路是在父組件中點擊事件時，先通過父子通信調用子組件的方法，然后在子組件中的該方法里使用子父通信調用父組件的另一個方法并將信息傳遞回來。以下是代碼演示：
父組件
<template>
<div class="parent" @click="getData">
我是父組件
<!--父組件監(jiān)聽子組件觸發(fā)的transData方法，調用自己的transData方法-->
<!--通過ref標記子組件-->
<children ref="child" @transData="transData"></children>
</div>
</template>
<script>
import Children from './children.vue'
export default {
data () {
return {
msg: 'hello, children'
}
},
methods: {
getData(){
// 調用子組件的getData方法
this.$refs.child.getData();
},
// 參數(shù)就是子組件傳遞出來的數(shù)據(jù)
transData(msg){
console.log(msg) // hello, parent
}
},
// 引入子組件
components:{
children: Children
}
}
</script>
子組件
<template>
<div class="hello">
<div class="children" >
我是子組件
<div>
子組件的數(shù)據(jù)：{{childrenSay}}
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
childrenSay: 'hello, parent'
}
},
methods: {
// 子組件通過emit方法觸發(fā)父組件中定義好的函數(shù)，從而將子組件中的數(shù)據(jù)傳遞給父組件
getData() {
this.$emit('transData' , this.childrenSay);
}
}
}
</script>
另一種情況思路也和這個一樣，基礎就在與父通信子和子通信父的靈活運用。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。
相關文章
vue-infinite-loading2.0 中文文檔詳解
本篇文章主要介紹了vue-infinite-loading2.0 中文文檔詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Vue中$emit調用父組件異步方法模擬.then實現(xiàn)方式
這篇文章主要介紹了Vue中$emit調用父組件異步方法模擬.then實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
Vue 實現(xiàn)監(jiān)聽窗口關閉事件,并在窗口關閉前發(fā)送請求
這篇文章主要介紹了Vue 實現(xiàn)監(jiān)聽窗口關閉事件,并在窗口關閉前發(fā)送請求，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue data的數(shù)據(jù)響應式到底是如何實現(xiàn)的
這篇文章主要介紹了Vue data的數(shù)據(jù)響應式到底是如何實現(xiàn)的，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
vue優(yōu)化之優(yōu)雅的拋出錯誤(Error)問題
這篇文章主要介紹了vue優(yōu)化之優(yōu)雅的拋出錯誤(Error)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了uni-app自定義導航欄按鈕|uniapp仿微信頂部導航條功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了Vue3中關于ref和reactive的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了詳解nuxt路由鑒權(express模板)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
使用WebStorm導入已有Vue項目并運行的詳細步驟與注意事項
這篇文章主要介紹了如何使用WebStorm導入、運行和管理Vue項目,包括環(huán)境配置、Node.js和npm版本管理、項目依賴管理以及常見問題的解決方案,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-11-11
插槽(slot)作用是讓父組件可以往子組件指定位置插入?html?結構,也是組件的一種通信方式,下面這篇文章主要給大家介紹了關于vue2組件進階與插槽的相關資料,需要的朋友可以參考下2023-02-02