通過(guò)實(shí)例講解vue組件之間的傳值
前言
目前在做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等方法，父子組件之間的傳值，十分常見，只要我們用會(huì)了組件之間的傳數(shù)據(jù)的方法，對(duì)于前端的組件抽離，性能提升都有很大的好處。
到此這篇關(guān)于vue組件之間的傳值的文章就介紹到這了,更多相關(guān)vue組件間傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue路由傳參刷新后數(shù)據(jù)丟失問(wèn)題及解決
這篇文章主要介紹了vue路由傳參刷新后數(shù)據(jù)丟失問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Element-Plus之el-col與el-row快速布局
el-col是el-row的子元素,下面這篇文章主要給大家介紹了關(guān)于Element-Plus之el-col與el-row快速布局的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了vue-router鉤子執(zhí)行順序示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
淺談使用Vue完成移動(dòng)端apk項(xiàng)目
這幾天，我做了一個(gè)vue移動(dòng)端的小項(xiàng)目，本文主要介紹了Vue移動(dòng)端apk項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
vue新建環(huán)境變量以及網(wǎng)絡(luò)請(qǐng)求工具axios的二次封裝詳解
這篇文章主要為大家介紹了vue新建環(huán)境變量以及網(wǎng)絡(luò)請(qǐng)求工具axios的二次封裝詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue.js過(guò)濾器+ajax實(shí)現(xiàn)事件監(jiān)聽及后臺(tái)php數(shù)據(jù)交互實(shí)例
這篇文章主要介紹了vue.js過(guò)濾器+ajax實(shí)現(xiàn)事件監(jiān)聽及后臺(tái)php數(shù)據(jù)交互,結(jié)合實(shí)例形式分析了vue.js前臺(tái)過(guò)濾器與ajax后臺(tái)數(shù)據(jù)交互相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
element 穿梭框性能優(yōu)化的實(shí)現(xiàn)
本文主要介紹了element 穿梭框性能優(yōu)化，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
今天小編就為大家分享一篇關(guān)于Vue核心概念Getter的使用方法，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了vue2項(xiàng)目的打包優(yōu)化方法,包括減少打包代碼體積和提升編譯時(shí)間等,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02
這篇文章主要介紹了vue3的錨點(diǎn)定位多種方法,需要的朋友可以參考下2024-01-01