vue 组件自定义v-model

vue 组件自定义v-model

 

参考资料：vue官网
在vue 中使用v-model双向绑定

<input v-model="something">

其实是语法糖

<input   :value="something"   @:input="something = $event.target.value">

自定义组件使用v-model

//父组件中调用
<child v-model="msg" />

//子组件代码

<template>
　　<div>
　　　　<slot />
　　</div>
</template>

<script>
export default {
　　name:'child',
　　componentName:'child',
　　data(){
　　　　return {
　　　　　　childVal:null
　　　　}
　　},
//vue中v-model默认绑定的是input事件，value参数，如果需要其他自定义的事件和数据名作为绑定，需要设置model
　　model: {
　　　　prop: 'value',
　　　　event: 'change'
　　},
　　props: {
　　　　value: {}
　　},
　　created(){
　　　　this.$emit('change', this.value);
　　},
}

</script>

​

 

posted on 2019-04-17 14:52 calamus 阅读( ...) 评论( ...) 编辑 收藏