开发src-在线系统的过程中,封装了很多组件,如Dialog prompt等,在开源项目的组件中这些组件使用v-model来控制显示,我来总结一下关于自己学习到的v-model知识
1. 使用props来控制关闭组件,emit同步变量-----props可以进行父组件到子组件的通信,我的思路把子组件控制v-if 的变量通过watch props的值来控制子组件的显示,这样父组件的值改变,子组件watch到改变,子组件关闭;同时我们可以单独关闭子组件,但是需要父组件的变量保持一致,可以在关闭组件的回调中,emit一个新的event来通知父组件,子组件关闭,父组件变量改变为false状态
// 父组件大致写法
<Dialog :show="show" @on-cancel="changeShow"> data() { show: true, }, methods: { changeShow(val) { this.show = val } }
2. v-model语法糖 v-model其实是一种简写方式,我们常见的有两种v-model,分别是input元素上的v-model 和非input元素上
<input v-model="price"><!-- 下行注释的语法糖 --> <!-- <input :value="price" @input="price = $event.target.value"> --> // $event.target.value 就是把input的值赋值给 price
data(){
return {
price: 20
}
}
对于非input元素呢,这里使用官方的例子
Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" > ` })
父组件
<base-checkbox v-model="lovingVue"></base-checkbox>
这里的 lovingVue
的值将会传入这个名为 checked
的 prop。同时当 <base-checkbox>
触发一个 change
事件并附带一个新的值的时候,这个 lovingVue
的属性将会被更新。
这里的change 可以是 input(input元素) click(dialog) 等等事件,具体要看是如何出发元素的状态改变, 注意.self 防止其他因素影响
有了这颗糖,封装组件的时候事半功倍