詳解Vue中子組件修改父組件傳過(guò)來(lái)的值的三種方式
更新時(shí)間：2024年12月12日 11:37:46 作者：陪你去流浪_
這篇文章主要為大家詳細(xì)介紹了Vue中子組件修改父組件傳過(guò)來(lái)的值的三種方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下
方式1：子組件發(fā)送emit，觸發(fā)父組件修改
父組件
<template>
<div>
<son :count="count" @updateCount="updateCount" />
</div>
</template>
<script>
import son from "./son";
export default {
data() {
return {
count: 0,
};
},
components: { son },
methods: {
updateCount(data) {
this.count = data;
},
},
};
</script>
子組件
<template>
<div class="goodsBasic">
<div>父組件：{{ count }}</div>
<el-button @click="changeCount">方式1</el-button>
</div>
</template>
<script>
export default {
props: {
count: {
type: Number,
default: 0,
},
},
methods: {
changeCount() {
this.$emit("updateCount", this.count + 1);
},
},
};
</script>
方式2：在子組件那里強(qiáng)制修改
父組件
<template>
<div>
<son :text.sync="text" />
</div>
</template>
<script>
import son from "./son";
export default {
data() {
return {
text: "hello world",
};
},
components: { son },
};
</script>
子組件
<template>
<div class="goodsBasic">
<div>父組件：{{ text }}</div>
<el-button @click="changeCount">方式2</el-button>
</div>
</template>
<script>
export default {
props: {
text: {
type: String,
default: "",
},
},
methods: {
changeCount() {
this.$emit("update:text", "我被強(qiáng)制修改了");
},
},
};
</script>
方式3：子組件定義一個(gè)值，來(lái)代替父組件傳過(guò)來(lái)的值（不推薦，該方法父子組件的值不是同步修改）
父組件
<template>
<div>
<son :count="count" />
</div>
</template>
<script>
import son from "./son";
export default {
data() {
return {
count: 0,
};
},
components: { son },
};
</script>
子組件
<template>
<div class="goodsBasic">
<div>子組件：{{ son_count }}</div>
<el-button @click="changeCount">方式3</el-button>
</div>
</template>
<script>
export default {
props: {
count: {
type: Number,
default: 0,
},
},
data() {
return {
son_count: this.count,
};
},
methods: {
changeCount() {
this.son_count++;
},
},
};
</script>以上就是詳解Vue中子組件修改父組件傳過(guò)來(lái)的值的三種方式的詳細(xì)內(nèi)容，更多關(guān)于Vue子組件修改父組件傳值的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue項(xiàng)目中使用vue-layer彈框插件的方法
這篇文章主要介紹了vue項(xiàng)目中使用vue-layer彈框插件的方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
vue+iview的菜單與頁(yè)簽的聯(lián)動(dòng)方式
這篇文章主要介紹了vue+iview的菜單與頁(yè)簽的聯(lián)動(dòng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07
Vue實(shí)現(xiàn)tab導(dǎo)航欄并支持左右滑動(dòng)功能
本文給大家介紹利用Vue實(shí)現(xiàn)tab導(dǎo)航欄，并且通過(guò)flex布局實(shí)現(xiàn)左右滑動(dòng)效果，通過(guò)代碼給大家分享tab導(dǎo)航欄布局的實(shí)現(xiàn)，本文給大家展示了完整代碼，需要的朋友參考下吧2021-06-06
element的el-form-item的prop作用小結(jié)
Vue表單驗(yàn)證中的prop屬性用于指定需要驗(yàn)證的表單字段,它定義了字段名稱并與驗(yàn)證規(guī)則關(guān)聯(lián),確保數(shù)據(jù)的完整性和準(zhǔn)確性,本文就來(lái)介紹一下element的el-form-item的prop作用,感興趣的可以了解一下2025-01-01
vue 使用 sortable 實(shí)現(xiàn) el-table 拖拽排序功能
這篇文章主要介紹了vue 使用 sortable 實(shí)現(xiàn) el-table 拖拽排序功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
vue實(shí)現(xiàn)在data里引入相對(duì)路徑
這篇文章主要介紹了vue實(shí)現(xiàn)在data里引入相對(duì)路徑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue+Openlayer實(shí)現(xiàn)圖形的拖動(dòng)和旋轉(zhuǎn)變形效果
Openlayer具有自己的擴(kuò)展插件ol-ext，可以用來(lái)實(shí)現(xiàn)圖形的拖拽、旋轉(zhuǎn)、縮放、拉伸、移動(dòng)等操作，本文將主要介紹通過(guò)Openlayer實(shí)現(xiàn)圖形的拖動(dòng)和旋轉(zhuǎn)，需要的同學(xué)可以學(xué)習(xí)一下2021-11-11
Vue 使用typescript如何優(yōu)雅的調(diào)用swagger API
這篇文章主要介紹了Vue 使用typescript如何優(yōu)雅的調(diào)用swagger API,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
Vue2 Element el-table多選表格控制選取的思路解讀
這篇文章主要介紹了Vue2 Element el-table多選表格控制選取的思路解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家介紹了vue運(yùn)用之vuex持久化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12