vue父子組件通信的高級用法示例

前言

10年積累的成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有賀州免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

vue項目的一大亮點(diǎn)就是組件化。使用組件可以極大地提高項目中代碼的復(fù)用率，減少代碼量。但是使用組件最大的難點(diǎn)就是父子組件之間的通信。

子通信父

父組件

<template>
<div class="parent">
我是父組件
<!--父組件監(jiān)聽子組件觸發(fā)的say方法，調(diào)用自己的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屬性傳遞進(jìn)來的數(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方法調(diào)用父組件的方法，達(dá)到子通信父的目的。

父通信子

父組件

<!--Html-->
<template>
<!--父組件觸發(fā)click方法-->
<div class="parent" @click="say">
我是父組件
<!--通過ref標(biāo)記子組件-->
<children ref="child"></children>
</div>
</template>

<script>
import Children from './children.vue'
export default {
data () {
return {
msg: "hello,my son"
}
},
methods: {
// 通過$refs調(diào)用子組件的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: {
// 父組件調(diào)用的JavaScript方法parentSay
parentSay(msg){
this.msg = msg;
}
}
}
</script>

父組件通過 $refs 調(diào)用子組件的方法。

以上就是父子組件通信的方式，父子組件傳遞數(shù)據(jù)直接用props，或者使用 $emit 和 $refs 依靠事件來傳遞數(shù)據(jù)。

父子組件通信提升篇

上文中，子通信父是在子中觸發(fā)點(diǎn)擊事件然后調(diào)用父組件的方法，父通信子是在父中觸發(fā)點(diǎn)擊事件調(diào)用子組件的方法。但是實際情況中可能存在子通信父時子組件不允許有點(diǎn)擊事件而事件在父中或者父通信子時點(diǎn)擊事件在子組件中。

子通信父時擊事件在父組件

這種情況其實很常見，例如提交一個表單時表單的內(nèi)容為子組件，而保存按鈕在父組件上。此時點(diǎn)擊保存按鈕想要獲取子組件表單的值。這種情況下已經(jīng)不單單是子通信父和父通信子了，需要將兩者結(jié)合在一起使用才能完成整個通信過程。

實現(xiàn)的思路是在父組件中點(diǎn)擊事件時，先通過父子通信調(diào)用子組件的方法，然后在子組件中的該方法里使用子父通信調(diào)用父組件的另一個方法并將信息傳遞回來。以下是代碼演示：

父組件

<template>
<div class="parent" @click="getData">
我是父組件
<!--父組件監(jiān)聽子組件觸發(fā)的transData方法，調(diào)用自己的transData方法-->
<!--通過ref標(biāo)記子組件-->
<children ref="child" @transData="transData"></children>
</div>
</template>

<script>
import Children from './children.vue'
export default {
data () {
return {
msg: 'hello, children'
}
},
methods: {
getData(){
// 調(diào)用子組件的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>

另一種情況思路也和這個一樣，基礎(chǔ)就在與父通信子和子通信父的靈活運(yùn)用。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對創(chuàng)新互聯(lián)的支持。

文章標(biāo)題：vue父子組件通信的高級用法示例
網(wǎng)站網(wǎng)址：http://aaarwkj.com/article34/igoipe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、Google、定制網(wǎng)站、小程序開發(fā)、微信小程序、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

vue父子組件通信的高級用法示例