vue組件之間進(jìn)行傳值的方法
前言
目前在做vue的項(xiàng)目，用到了子組件依賴其父組件的數(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中this.$confirm的使用及說(shuō)明方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue-router路由傳參的兩種方式詳解(params和query)
vue-router 是一個(gè)基于vue.js的路由器,它提供了強(qiáng)大的路由功能,能夠幫助開(kāi)發(fā)者快速構(gòu)建單頁(yè)應(yīng)用程序,本文將詳細(xì)介紹 vue-router 路由傳參的方法,包括路由傳參的概念、路由傳參的方法、路由傳參的應(yīng)用場(chǎng)景等,需要的朋友可以參考下2024-12-12
Vue項(xiàng)目每次發(fā)版后要清理瀏覽器緩存問(wèn)題解決辦法
最近項(xiàng)目更新頻繁,每次一更新客戶都說(shuō)還跟之前的一樣,一查原因是因?yàn)榭蛻魶](méi)有清空瀏覽器的緩存,所以為了方便客戶看到最新版本,開(kāi)始調(diào)研再發(fā)布新版本后自動(dòng)清理緩存,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目每次發(fā)版后要清理瀏覽器緩存問(wèn)題的解決辦法,需要的朋友可以參考下2024-02-02
基于vue+echarts實(shí)現(xiàn)柱狀圖漸變色效果(每個(gè)柱子顏色不同)
前段時(shí)間的vue項(xiàng)目中用到了echarts柱狀圖,由于UI設(shè)計(jì)稿中要求使用漸變色,并且每個(gè)柱子的顏色不同,于是做了一番研究,現(xiàn)將我的實(shí)現(xiàn)方案分享如下2024-05-05
本篇文章主要介紹了web前端vue之CSS過(guò)渡效果示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié)
這篇文章主要介紹了Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
Monaco-editor 的 JSON Schema 配置及使用介紹
這篇文章主要為大家介紹了Monaco-editor 的 JSON Schema 配置及使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Vue2.0權(quán)限樹(shù)組件實(shí)現(xiàn)代碼
本文通過(guò)實(shí)例代碼給大家介紹了Vue2.0權(quán)限樹(shù)組件實(shí)現(xiàn)代碼，需要的的朋友參考下吧2017-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)物流時(shí)間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08