摘要:在的學習中,一開始我是自己寫組件練手的,在這個過程中我遇到一個問題父組件傳遞給子組件參數(shù)直接在子組件里直接使用是可以實時更新的如果在,等聲明或者直接賦值給的時候,再用的時候是不可以實時更新的內(nèi)部的是可以實時更新的但是內(nèi)部不可以強制去改變父元
在vue的學習中,一開始我是自己寫組件練手的,在這個過程中我遇到一個問題:
props:父組件傳遞給子組件參數(shù)
(1)props直接在子組件里直接使用是可以實時更新的
(2)props如果在created,mounted等聲明或者直接賦值給data的時候,再用data的時候是不可以實時更新的
(3)內(nèi)部的data是可以實時更新的
(4)但是內(nèi)部不可以強制去改變父元素傳遞過來的props,這樣是官方不允許的而且是不嚴謹?shù)?/p>
那么,我在寫模態(tài)框組件的時候就產(chǎn)生一個很矛盾的問題,如果父級props控制了組件內(nèi)部的顯示和隱藏,
內(nèi)部點擊模態(tài)框陰影的時候也可以讓其自動隱藏,我到底去修改什么值,修改了之后怎么去改變父組件傳遞過來的props,
給全局一個反饋呢。
在看過文章和自己動手操作后選取了一種方式,將內(nèi)部的data和props進行關(guān)聯(lián),采用vue中v-modal的原理,值發(fā)生變化(input事件),
對應的數(shù)據(jù)也發(fā)生相應的改變:
不多說,直接貼代碼:
子組件:
template:
模態(tài)框
javascript:
import { mapState, mapActions } from "vuex" import _ from "lodash" export default { name: "msg-modal", data () { return { isShow: this.value } }, props: { value: { type: Boolean, default: false }, closeable: { type: Boolean, default: false }, btnTxt: { type: [String, Number], default: "確定" }, content: { default: "內(nèi)容" } }, watch: { value (val) { this.isShow = val; }, isShow (val) { this.$emit("input", val); } }, computed: { ...mapState({ allAnchorList: state => state.anchor.list.data }) }, methods: { ...mapActions(["removeAnchor"]), onClick () { this.$emit("onClick") }, onMaskClose () { if(!this.closeable) { return } Object.assign(this.$data, this.$options.data()) } } }
less:
.modal { position: fixed; z-index: 800; top: 0; left: 0; width: 100%; height: 100%; display: table; transition: all .3s; background-color: transparent; &.active{ opacity: 1; } .modal-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-color: rgba(0, 0, 0, .5); } .modal-wrapper { display: table-cell; vertical-align: middle; .modal-container { width: 300px; margin: 0 auto; border-radius: 2px; //box-shadow: 0 2px 8px rgba(0, 0, 0, .33); transition: all .3s ease; font-family: Helvetica, Arial, sans-serif; .header{ position: relative; backgroud-color: #fff, min-height: 50px; } .modal-body { margin: 20px 0; } .footer { padding-bottom: 26px; overflow: hidden; border-bottom-left-radius: 4px !important; border-bottom-right-radius: 4px !important; background-color: #fff; .btn { height: 36px; line-height: 36px; width: 230px; margin: 0 auto; color: #fff; font-size: 14px; text-align: center; cursor: pointer; user-select: none; background-color: #2859ED; border-radius: 4px; } } } } }
父組件的引用:
template:
javascript:
樣式隨便寫的,
主要就是用vue的v-model原理,將值與被傳遞的props實現(xiàn)雙向綁定,
需要注意的是在組件mounted的時候需要對組件初始化中的傳遞的props賦值給綁定的v-model的value
自己也是才摸索vue全家桶階段,才沒做兩個項目
有不足的地方請大家見諒和指導
歡迎大家討論
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/117081.html
摘要:在項目中開始使用來構(gòu)建項目了,跟很大的一處不同在于取消了的雙向綁定,改成只能從父級傳到子級的單向數(shù)據(jù)流,初衷當然是好的,為了避免雙向綁定在項目中容易造成的數(shù)據(jù)混亂。能不能不寫來實現(xiàn)的雙向綁定呢,答案是可以的。 在項目中開始使用vue2來構(gòu)建項目了,跟 vue1 很大的一處不同在于2 取消了props 的雙向綁定,改成只能從父級傳到子級的單向數(shù)據(jù)流,初衷當然是好的,為了避免雙向綁定在項目...
摘要:儲存訂閱器因為屬性被監(jiān)聽,這一步會執(zhí)行監(jiān)聽器里的方法這一步我們把也給弄了出來,到這一步我們已經(jīng)實現(xiàn)了一個簡單的雙向綁定了,我們可以嘗試把兩者結(jié)合起來看下效果。總結(jié)本文主要是對雙向綁定原理的學習與實現(xiàn)。 當今前端天下以 Angular、React、vue 三足鼎立的局面,你不選擇一個陣營基本上無法立足于前端,甚至是兩個或者三個陣營都要選擇,大勢所趨。 所以我們要時刻保持好奇心,擁抱變化,...
摘要:在模式中一般把層算在層中,只有在理想的雙向綁定模式下,才會完全的消失。層將通過特定的展示出來,并在控件上綁定視圖交互事件,一般由框架自動生成在瀏覽器中。三大框架的異同三大框架都是數(shù)據(jù)驅(qū)動型的框架及是雙向數(shù)據(jù)綁定是單向數(shù)據(jù)綁定。 MVVM相關(guān)概念 1) MVVM典型特點是有四個概念:Model、View、ViewModel、綁定器。MVVM可以是單向綁定也可以是雙向綁定甚至是不綁...
摘要:在的學習中,一開始我是自己寫組件練手的,在這個過程中我遇到一個問題父組件傳遞給子組件參數(shù)直接在子組件里直接使用是可以實時更新的如果在,等聲明或者直接賦值給的時候,再用的時候是不可以實時更新的內(nèi)部的是可以實時更新的但是內(nèi)部不可以強制去改變父元 在vue的學習中,一開始我是自己寫組件練手的,在這個過程中我遇到一個問題:props:父組件傳遞給子組件參數(shù)(1)props直接在子組件里直接使用...
閱讀 1265·2021-10-14 09:50
閱讀 1567·2019-08-30 15:54
閱讀 1022·2019-08-30 11:22
閱讀 2916·2019-08-30 10:50
閱讀 1800·2019-08-29 18:39
閱讀 3050·2019-08-29 13:07
閱讀 2078·2019-08-28 17:54
閱讀 751·2019-08-26 17:44