vue2自定义v-model

125 阅读1分钟
// 父组件
自定义 v-model
<p>{{ name }}</p>
<CustomVModel v-model="name" />
 data() {
    return {
      name: 'gee'
    }
  }
// 子组件
<template>
  <!-- 例如:vue 颜色选择 -->
  <!-- @input 一般用于监听事件:只要输入的值变化了就会触发input -->
  <!-- value="gee" -->
  <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>