当前位置: 首页 > Web前端 > HTML5

vue中道具的双向绑定

时间:2023-04-05 20:31:28 HTML5

在Vue的学习中,一开始都是自己写组件练习的。过程中遇到了一个问题:props:父组件传给子组件的参数(1)子组件中直接使用props是可以实时更新的(2)props是在created中声明的,mounted等或者直接赋值给数据,再次使用数据时无法实时更新。(3)内部数据可实时更新。(4)但是内部不能强制改变父元素传过来的props,这是官方不允许的,也不严谨。然后,我在写模态框组件的时候,遇到了一个很矛盾的问题。如果父props控制显示和隐藏,当模态框的阴影在里面点击时,也可以自动隐藏。应该修改什么值,修改后父组件传过来的props怎么改,全局反馈。看完文章自己动手,选择了一种将内部数据与props关联的方式,利用vue中v-modal的原理,当值发生变化(输入事件)时,对应的数据也随之变化:不多说了,直接粘贴代码即可:div@click="onMaskClose"class="modal-mask">

模态框
{{btnTxt}}javascript:import{mapState,mapActions}from'vuex'import_from'lodash'exportdefault{name:"msg-modal",data(){return{isShow:this.value}},props:{value:{type:Boolean,default:false},closeable:{type:Boolean,default:false},btnTxt:{type:[String,Number],默认:'确定'},content:{default:'内容'}},watch:{value(val){this.isShow=val;},isShow(val){this.$emit('input',val);}},计算:{...mapState({allAnchorList:state=>state.anchor.list.data})},方法:{...mapActions(['removeAnchor']),onClick(){this.$emit('onClick')},onMaskClose(){if(!this.closeable){返回}对象。assign(this.$data,this.$options.data())}}}less:.modal{position:fixed;z-指数:800;顶部:0;左:0;宽度:100%;高度:100%;显示:表格;过渡:所有.3s;背景颜色:透明;&.active{不透明度:1;}.modal-mask{位置:固定;顶部:0;左:0;宽度:100%;高度:100%;z-指数:-1;背景色:rgba(0,0,0,.5);}.modal-wrapper{显示:表格单元格;垂直对齐:中间;.modal-container{宽度:300px;保证金:0自动;边界半径:2px;//盒子阴影:02px8pxrgba(0,0,0,.33);过渡:所有.3s轻松;字体系列:Helvetica、Arial、sans-serif;.header{位置:相对;背景色r:#fff,最小高度:50px;}.modal-body{边距:20px0;}.footer{padding-bottom:26px;溢出:隐藏;border-bottom-left-radius:4px!important;border-bottom-right-radius:4px!important;背景色:#fff;.btn{高度:36px;行高:36px;宽度:230px;保证金:0自动;颜色:#fff;字体大小:14px;文本对齐:居中;游标:指针;用户选择:无;背景色:#2859ED;边界半径:4px;}}}}}父组的引用:template:javascript:样式随便写,主要是利用vue的v-model原理传递value和value的props实现双向绑定。需要注意的是,在挂载组件时,需要将组件初始化中传递的props赋值给绑定的v-model的值。如有不足之处,还请多多包涵和指导。欢迎讨论