詳解vue中的父子傳值雙向綁定及數(shù)據(jù)更新問(wèn)題
在進(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)行修改,官方文檔中也有說(shuō)明
當(dāng)時(shí)我是直接對(duì)數(shù)組中的值進(jìn)行修改,但是視圖沒(méi)有發(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)文章
如何解決d3.event在v7版本無(wú)效影響zoom拖拽縮放問(wèn)題
這篇文章主要介紹了如何解決d3.event在v7版本無(wú)效影響zoom拖拽縮放問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03VUE+Express+MongoDB前后端分離實(shí)現(xiàn)一個(gè)便簽墻
這篇文章主要介紹了VUE+Express+MongoDB前后端分離實(shí)現(xiàn)一個(gè)便簽墻,需要的朋友可以參考下2021-04-04Vue中利用better-scroll組件實(shí)現(xiàn)橫向滾動(dòng)功能
橫向滾動(dòng)這個(gè)功能是我們?nèi)粘i_(kāi)發(fā)中經(jīng)常會(huì)遇到的一個(gè)需求,下面這篇文章主要給大家介紹了關(guān)于Vue中如何利用better-scroll組件實(shí)現(xiàn)橫向滾動(dòng)的相關(guān)資料,需要的朋友可以參考下2021-06-06在vue-cli項(xiàng)目中使用bootstrap的方法示例
本篇文章主要介紹了在vue-cli項(xiàng)目中使用bootstrap的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04基于Vue3和Plotly.js實(shí)現(xiàn)交互式3D圖
這篇文章主要介紹了基于Vue3和Plotly.js實(shí)現(xiàn)交互式3D圖,本代碼旨在為數(shù)據(jù)可視化提供一個(gè)交互式圖表,允許用戶(hù)動(dòng)態(tài)控制圖表中線(xiàn)條的顏色和可見(jiàn)性,此功能對(duì)于探索大型數(shù)據(jù)集或突出特定數(shù)據(jù)子集非常有用,需要的朋友可以參考下2024-07-07axios取消請(qǐng)求CancelToken的用法示例代碼
Axios提供了取消請(qǐng)求的功能,可以通過(guò)使用CancelToken來(lái)實(shí)現(xiàn),這篇文章主要給大家介紹了關(guān)于axios取消請(qǐng)求CancelToken的用法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10