vue 组件自定义v-model

• Z时代
• 2024-01-10
• 分类：综合

参考资料：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>

​

以上是 vue 组件自定义v-model 的全部内容， 来源链接： utcz.com/z/376076.html