// 父组件
自定义 v-model
<p>{{ name }}</p>
<CustomVModel v-model="name" />
data() {
return {
name: '双越'
}
}
// 子组件
<template>
<!-- 例如:vue 颜色选择 -->
<!-- @input 一般用于监听事件:只要输入的值变化了就会触发input -->
<!-- value="双越" -->
<input type="text" :value="text1" @input="$emit('change1', $event.target.value)">
<!--
1. 上面的 input 使用了 :value 而不是 v-model
2. 上面的 change1 和 model.event 要对应起来
3. text1 属性对应起来
-->
</template>
<script>
export default {
model: {
prop: 'text1', // 对应 props text1
event: 'change1'
},
// 注意你仍然需要在组件的 props 选项里声明 text1 这个 prop。
props: {
text1: String,
default() {
return ''
}
}
}
</script>
vue2自定义v-model
于 2023-03-21 15:21:49 首次发布