通過實(shí)例講解vue組件之間的傳值
更新時(shí)間：2022年09月15日 10:13:32 作者：KinHKin(五年前端)
通過Vuex共享數(shù)據(jù),官方給出的跨多組件傳遞數(shù)據(jù)的解決方案,下面這篇文章主要給大家介紹了關(guān)于vue組件之間傳值的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
前言
目前在做vue的項(xiàng)目，用到了子組件依賴其父組件的數(shù)據(jù)，進(jìn)行子組件的相關(guān)請(qǐng)求和頁面數(shù)據(jù)展示，父組件渲染需要子組件通知更新父組件的state，父子組件之間的傳值一般有三種方法：
- 父?jìng)髯?/strong>
- 子傳父
- 非父子傳值
注意：
父子組件的關(guān)系可以總結(jié)為 prop 向下傳遞，事件向上傳遞。父組件通過 prop 給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息。
接下來，我們會(huì)通過實(shí)例代碼來看的更清晰，理解更容易：
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í)例，父組件可以通過 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)文章
這篇文章主要為大家詳細(xì)介紹了vue開發(fā)簡(jiǎn)單上傳圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue 插槽簡(jiǎn)介及使用示例，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
VUE+node（express）實(shí)現(xiàn)前后端分離
在本篇文章里小編給大家分享的是關(guān)于VUE+node（express）前后端分離實(shí)例內(nèi)容，有需要的朋友們參考下。2019-10-10
虛擬列表是一種技術(shù)，它只渲染用戶當(dāng)前可見的列表項(xiàng)，而不是渲染整個(gè)列表，這篇文章主要來和大家聊聊虛擬列表的原理與實(shí)現(xiàn)，希望對(duì)大家有所幫助2023-05-05
對(duì)Vue table 動(dòng)態(tài)表格td可編輯的方法詳解
今天小編就為大家分享一篇對(duì)Vue table 動(dòng)態(tài)表格td可編輯的方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue中使用vee-validate表單驗(yàn)證的方法
vee validate 一個(gè)輕量級(jí)的 vue表單驗(yàn)證插件。接下來通過本文給大家分享Vue中使用vee-validate表單驗(yàn)證的方法，需要的朋友參考下吧2018-05-05
近接觸到了一個(gè) Vue3 的打印需求,我發(fā)現(xiàn)自己雖然從事前端開發(fā)已有多年,但對(duì)如何實(shí)現(xiàn)自定義打印還沒有深入研究,一般都是找現(xiàn)成的庫來解決問題,借這次的機(jī)會(huì)研究了一下如何實(shí)現(xiàn)自定義打印,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了在vue中封裝方法以及多處引用該方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue3計(jì)算屬性和異步計(jì)算屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了教你搭建按需加載的Vue組件庫(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07