詳解vue中的父子傳值雙向綁定及數(shù)據(jù)更新問題
在進(jìn)行父子組件傳值時(shí),用到子組件直接控制父組件中的變量值以及在vue中直接更改對(duì)象或者數(shù)組的值,視圖未發(fā)生變化的解決辦法,當(dāng)時(shí)完成項(xiàng)目時(shí),一直未找到原因,修改了好久。
1.父子組件傳值雙向綁定
在傳遞給子組件中的變量上使用.sync修飾符,就能夠?qū)崿F(xiàn)父子傳值的雙向綁定
<!-- 父組件 -->
<template>
<div class="audioCate">
<child :show.sync="showModel" @closeModel="handleCloseModel"></child>
</div>
</template>
<script>
import child from './child'
export default{
components: {
child,
}
data() {
return {
showModel: false
}
},
methods: {
handleCloseModel() {
this.showModel = false;
}
}
}
</script>
<!-- 子組件 -->
<template>
<div class="cate" @click="handleClick">
<div></div>
</div>
</template>
<script>
export default{
props: {
show: Boolean,
},
data() {
return {
showModel: false
}
},
methods: {
handleClick() {
/* 直接更新父組件中的showModel值 */
this.$emit('update:show', false);
/* 或者調(diào)用父組件中的方法對(duì)showModel進(jìn)行更改 */
/* this.$emit('closeModel'); */
}
}
}
</script>
2.修改對(duì)象或數(shù)組中的鍵,視圖未發(fā)生變化
使用$set方法進(jìn)行修改,官方文檔中也有說明

當(dāng)時(shí)我是直接對(duì)數(shù)組中的值進(jìn)行修改,但是視圖沒有發(fā)生變化
<script>
export default{
data() {
return {
item: {
title: '222'
},
options: [11, 22],
list: [
{
title: '2222'
}
]
}
},
created() {
/* 對(duì)于對(duì)象,第一個(gè)為要修改的對(duì)象,第二個(gè)參數(shù)為對(duì)象的鍵,第三個(gè)為要修改的鍵對(duì)應(yīng)的值 */
this.$set(this.item, 'title', '2200');
/* 對(duì)于對(duì)象,第一個(gè)為要修改的數(shù)組,第二個(gè)參數(shù)為數(shù)組索引,第三個(gè)為要修改的索引對(duì)應(yīng)的值 */
this.$set(this.options, 0, 33);
/* 對(duì)于數(shù)組里包含對(duì)象,可以利用循環(huán)對(duì)其進(jìn)行修改 */
this.list.forEach(item => {
this.$set(item, '_disableExpand', true);
});
/* 對(duì)于數(shù)組里包含對(duì)象,也可以利用Object.assign對(duì)其進(jìn)行修改 */
this.list[0] = Object.assign({}, this.list[0], { num: 10 });
this.$set(this.list, 0, this.list[0]);
},
}
</script>
也可以直接進(jìn)行修改后對(duì)頁(yè)面進(jìn)行強(qiáng)制刷新,使用$forceUpdate()方法
this.options[0] = 100; this.$forceUpdate();
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決vant title-active-color與title-inactive-color不生效問題
這篇文章主要介紹了解決vant title-active-color與title-inactive-color不生效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
關(guān)于vue.extend和vue.component的區(qū)別淺析
最近工作中遇到了vue.extend,vue.component,但二者之間的區(qū)別與聯(lián)系是什么呢?下面這篇文章主要給大家介紹了關(guān)于vue.extend和vue.component區(qū)別的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-08-08
vue如何限制只能輸入正負(fù)數(shù)及小數(shù)
這篇文章主要介紹了vue如何限制只能輸入正負(fù)數(shù)及小數(shù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
vue控制滾動(dòng)條滑到某個(gè)位置的方法實(shí)例
當(dāng)容器有滾動(dòng)條時(shí),有時(shí)需要將滾動(dòng)條滑到某個(gè)位置,下面這篇文章主要給大家介紹了關(guān)于vue控制滾動(dòng)條滑到某個(gè)位置的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
vue 實(shí)現(xiàn)搜索的結(jié)果頁(yè)面支持全選與取消全選功能
這篇文章主要介紹了vue 實(shí)現(xiàn)搜索的結(jié)果頁(yè)面支持全選與取消全選功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vue單應(yīng)用在ios系統(tǒng)中實(shí)現(xiàn)微信分享功能操作
這篇文章主要介紹了vue單應(yīng)用在ios系統(tǒng)中實(shí)現(xiàn)微信分享功能操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue動(dòng)態(tài)合并單元格并添加小計(jì)合計(jì)功能示例
這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)合并單元格并添加小計(jì)合計(jì)功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11

