Vue父子之間值傳遞的實(shí)例教程
更新時(shí)間：2020年07月02日 08:36:32 作者：周龍飛
這篇文章主要給大家介紹了關(guān)于Vue父子之間值傳遞的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
將通過(guò)兩個(gè)input框?qū)崿F(xiàn)父子之間的值傳遞作為演示，效果圖
先注冊(cè)父子各一個(gè)組件，代碼如下
<div id="app">
<parent></parent>
</div>
<template id="parent">
<div>
<input type="text" v-model="text" placeholder="parent">
<son></son>
</div>
</template>
<template id="son">
<div>
<input type="text" placeholder="son">
</div>
</template>
new Vue({
el: "#app",
components: {
parent: {
template: '#parent',
data() {
return {
text: ''
}
},
components: {
son: {
template: '#son'
}
}
}
}
})
一、父?jìng)髯?/strong>
再父組件通過(guò)屬性傳遞值
<template id="parent">
<div>
<input type="text" v-model="text" placeholder="parent">
<son :text="text"></son>//通過(guò)屬性值傳遞
</div>
</template>
子組件通過(guò)props屬性接受
components: {
son: {
template: '#son',
props:['text'] //通過(guò)props屬性接受父?jìng)鬟f過(guò)來(lái)的值
}
}
這樣我們就可以使用父組件傳遞過(guò)來(lái)的值了
<template id="son">
<div>
<input type="text" placeholder="son" :value="text">//使用父元素傳遞過(guò)來(lái)的值
</div>
</template>
看下現(xiàn)在的效果
父組件向子組件傳遞成功
二、子傳父
通過(guò)父組件自定義事件，然后子組件用$emit(event,aguments)調(diào)用
<template id="parent">
<div>
<input type="text" v-model="text" placeholder="parent">
<son :text="text" @ev="item"></son>//自定義事件
</div>
</template>
components: {
parent: {
template: '#parent',
data() {
return {
text: ''
}
},
components: {
son: {
template: '#son',
props: ['text']
}
},
methods: {
item(v) { //自定義事件觸發(fā)的方法
this.text = v //使用子組件傳遞過(guò)來(lái)的值改變this.text數(shù)據(jù)
}
}
}
}
再子組件觸發(fā)自定義事件
<template id="son">
<div>
<input type="text" placeholder="son" :value="text" @input="emit" ref="son">//觸發(fā)自定義事件
</div>
</template>
components: {
parent: {
template: '#parent',
data() {
return {
text: ''
}
},
components: {
son: {
template: '#son',
props: ['text'],
methods: {
emit() {
this.$emit('ev', this.$refs.son.value) //觸發(fā)自定義事件，并傳遞值
}
}
}
},
methods: {
item(v) {
this.text = v
}
}
}
}
這樣就完成了子傳父，父?jìng)髯樱Ч餐瓿闪?/p>
總結(jié)
到此這篇關(guān)于Vue父子之間值傳遞的文章就介紹到這了,更多相關(guān)Vue父子值傳遞內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue中的Props(不可變狀態(tài)),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路詳解
這篇文章主要給大家介紹了關(guān)于vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
Vuex數(shù)據(jù)持久化實(shí)現(xiàn)的思路與代碼
Vuex數(shù)據(jù)持久化可以很好的解決全局狀態(tài)管理,當(dāng)刷新后數(shù)據(jù)會(huì)消失,這是我們不愿意看到的。這篇文章主要給大家介紹了關(guān)于Vuex數(shù)據(jù)持久化實(shí)現(xiàn)的思路與代碼，需要的朋友可以參考下2021-05-05
這篇文章主要介紹了如何寫(xiě)一個(gè)Vue loading 插件，幫助大家更好的理解和學(xué)習(xí)vue 插件的相關(guān)知識(shí)，感興趣的朋友可以了解下2020-11-11
Vue響應(yīng)式原理Observer、Dep、Watcher理解
這篇文章主要介紹了Vue響應(yīng)式原理-理解Observer、Dep、Watcher,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue自定義權(quán)限標(biāo)簽詳細(xì)代碼示例
這篇文章主要給大家介紹了關(guān)于vue自定義權(quán)限標(biāo)簽的相關(guān)資料,在Vue中你可以通過(guò)創(chuàng)建自定義組件來(lái)實(shí)現(xiàn)自定義標(biāo)簽組件,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
Vue實(shí)現(xiàn)面包屑導(dǎo)航的正確方式
面包屑導(dǎo)航(BreadcrumbNavigation)這個(gè)概念來(lái)自童話(huà)故事“漢賽爾和格萊特”，它的作用是告訴訪(fǎng)問(wèn)者他們?cè)诰W(wǎng)站中的位置以及如何返回，本文為大家介紹了實(shí)現(xiàn)面包屑導(dǎo)航的正確方式，需要的可以參考一下2023-06-06
Vue 兩個(gè)字段聯(lián)合校驗(yàn)之修改密碼功能的實(shí)現(xiàn)
本文以校驗(yàn)兩次密碼的一致性應(yīng)用，給出兩個(gè)可變屬性值的字段之間的聯(lián)合校驗(yàn)的典型解決方案，通過(guò)實(shí)例代碼給大家介紹Vue 兩個(gè)字段聯(lián)合校驗(yàn)之修改密碼功能的實(shí)現(xiàn)，需要的朋友一起看看吧2021-07-07
五分鐘搞懂Vuex實(shí)用知識(shí)(小結(jié))
本篇文章主要介紹了五分鐘搞懂Vuex實(shí)用知識(shí)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
本文介紹了vue 項(xiàng)目常用加載器及配置詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01