vue組件之間進(jìn)行傳值的方法
前言
目前在做vue的項(xiàng)目，用到了子組件依賴(lài)其父組件的數(shù)據(jù)，進(jìn)行子組件的相關(guān)請(qǐng)求和頁(yè)面數(shù)據(jù)展示，父組件渲染需要子組件通知更新父組件的state，父子組件之間的傳值一般有三種方法：
父?jìng)髯?/strong>子傳父非父子傳值
注意：
父子組件的關(guān)系可以總結(jié)為 prop 向下傳遞，事件向上傳遞。父組件通過(guò) prop 給子組件下發(fā)數(shù)據(jù)，子組件通過(guò)事件給父組件發(fā)送消息。
接下來(lái)，我們會(huì)通過(guò)實(shí)例代碼來(lái)看的更清晰，理解更容易：
1.父組件向子組件進(jìn)行傳值
父組件代碼：
<template>
<div>
父組件：
<el-input v-model="val" style="width:300px" />
<child :value="val" />
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'Parent',
data() {
return {
val: '我是父組件'
}
},
components: {
child
},
}
</script>子組件代碼：
<template>
<div class="child">
子組件： {{ value }}
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
props: ['value']
}
</script>
<style scoped>
.child {
margin-top: 20px;
}
</style>2.子組件向父組件進(jìn)行傳值
父組件代碼：
<template>
<div>
父組件：
<el-input v-model="val" style="width:300px" />
<child :value="val" @bindMsg='msgFun' />
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'Parent',
data() {
return {
val: '我是父組件'
}
},
components: {
child
},
methods: {
msgFun(childVal) {
console.log(childVal,'childVal')
this.val = childVal
}
}
}
</script>子組件代碼：
<template>
<div class="child">
子組件： {{ value }}
<el-button @click="$emit('bindMsg', '我是子組件')">點(diǎn)擊改變父組建數(shù)據(jù)</el-button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
props: ['value'],
}
</script>
<style scoped>
.child {
margin-top: 20px;
}
</style>3.非父子組件之間的傳值
.sync可以幫我們實(shí)現(xiàn)父組件向子組件傳遞的數(shù)據(jù)的雙向綁定，所以子組件接收到數(shù)據(jù)后可以直接修改，并且會(huì)同時(shí)修改父組件的數(shù)據(jù)
ref綁定在子組件上，引用的指向就是子組件的實(shí)例，父組件可以通過(guò) ref 主動(dòng)獲取子組件的屬性或者調(diào)用子組件的方法
父組件代碼：
<template>
<div>
父組件：
<el-input v-model="val" style="width:300px" />
<el-button @click="childRefClick">父組件ref點(diǎn)擊</el-button>
<child :value="val" @bindMsg='msgFun' :data.sync='data' ref='child' />
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'Parent',
data() {
return {
val: '我是父組件',
data: ''
}
},
components: {
child
},
methods: {
msgFun(childVal) {
console.log(childVal, 'childVal')
this.val = childVal;
},
childRefClick() {
//ref獲取子組件實(shí)例的屬性和方法
const child = this.$refs.child
console.log(child.name)
child.childBtnClick("調(diào)用了子組件的方法")
}
}
}
</script>子組件代碼：
<template>
<div class="child">
子組件： {{ value }}
<el-button @click="childBtnClick">點(diǎn)擊改變父組建數(shù)據(jù)</el-button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
currenData: {}
}
},
props: ['value', 'data'],
methods: {
childBtnClick(val) {
console.log(val,'val')
this.$emit('bindMsg', val || '我是子組件')
},
},
}
</script>
<style scoped>
.child {
margin-top: 20px;
}
</style>非父子組件之間的傳值方式還有slot插槽，vuex數(shù)據(jù)狀態(tài)管理器等等
總結(jié)
主要用到了父子組件的傳值，props，$emit，ref，sync等方法，父子組件之間的傳值，十分常見(jiàn)，只要我們用會(huì)了組件之間的傳數(shù)據(jù)的方法，對(duì)于前端的組件抽離，性能提升都有很大的好處。
到此這篇關(guān)于vue組件之間進(jìn)行傳值的方法的文章就介紹到這了,更多相關(guān)vue組件傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue之bus總線(xiàn)簡(jiǎn)單使用講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確問(wèn)題解析
在近期開(kāi)發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來(lái)對(duì)頁(yè)面進(jìn)行縮放,但是此時(shí)發(fā)現(xiàn)彈框定位出錯(cuò)問(wèn)題,無(wú)法準(zhǔn)備定位到實(shí)際位置,本文給大家分享Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確解決方法,感興趣的朋友一起看看吧2024-01-01
vue中如何使用embed標(biāo)簽PDF預(yù)覽
這篇文章主要介紹了vue中如何使用embed標(biāo)簽PDF預(yù)覽，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
淺談mint-ui loadmore組件注意的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談mint-ui loadmore組件注意的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
隨著Vue的使用越來(lái)越多,對(duì)Vue的其他知識(shí)點(diǎn)也開(kāi)始逐漸多了解一點(diǎn),這次做頁(yè)面上的計(jì)算,用了Watch偵聽(tīng)器,這篇文章主要給大家介紹了關(guān)于Vue中偵聽(tīng)器基本用法的相關(guān)資料,需要的朋友可以參考下2021-08-08
一文了解vue-router之hash模式和history模式
這篇文章主要介紹了一文了解vue-router之hash模式和history模式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細(xì)介紹了Vue生命周期中的組件化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
這篇文章主要為大家介紹了Yarn與Lerna管理monorepo的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue項(xiàng)目中v-model父子組件通信的實(shí)現(xiàn)詳解
vue.js，是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的庫(kù)。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中v-model父子組件通信實(shí)現(xiàn)的相關(guān)資料，需要的朋友可以參考下。2017-12-12
vue設(shè)置導(dǎo)航欄、側(cè)邊欄為公共頁(yè)面的例子
今天小編就為大家分享一篇vue設(shè)置導(dǎo)航欄、側(cè)邊欄為公共頁(yè)面的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11