vue3：自定义组件之v-model父子组件双向绑定

vue3.x移除了vue2.x的model选项，自定义组件双向绑定不在使用以下方法：

model: {
     prop: 'value', //3.x默认值改为了modelValue
     event: 'input' //3.x默认值改为了update:modelValue
   },
//使用 this.$emit('input', index);

vue3.x采用以下方式（v-model默认对应的prop值是modelValue）：

父组件：

<inpageMenus
	v-model="menu"
	/>

子组件：

<script>
export default {
  name: 'MenusComponent',
  props: {
    modelValue: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    clickMenu(index) {
      this.$emit('update:modelValue', index);
    },
  },
};
</script>

vue3.x可以绑定多个v-model：

父组件：

<inpageMenus
	v-model="menu"
	v-model:text="text"
	/>

子组件：

<script>
export default {
  name: 'MenusComponent',
  props: {
    modelValue: {
      type: Number,
      default: 0,
    },
    text: {
      type: String,
      default: '0',
    },
  },
  methods: {
    clickMenu(index) {
      this.$emit('update:modelValue', index);
    },
    textChange(str) {
      this.$emit('update:text', str);
    },
  },
};
</script>

vue3.x去掉了v-model的.sync修饰符，其他的比如.trim依然可以使用，新增自定义修饰符

父组件

    <test
      v-model.toLowerCase="color"
      v-model:text.toUpperCase="textValue"/>

子组件

<template>
  <div class='test'>
    <input type="text" @input="inputf">
    <input type="text" @input="input2f">
  </div>
</template>

<script>
export default {
  name: 'test',
  props: {
    modelValue: {
      type: String,
      default: 'eee',
    },
    modelModifiers: { // 获取modelValue修饰符
      type: Object,
      default: () => ({}),
    },
    text: {
      type: String,
      default: 'eee',
    },
    textModifiers: { // 获取text修饰符
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    inputf(e) {
      let { value } = e.target;
      if (this.modelModifiers.toLowerCase) {
        value = value.toLowerCase();
      }
      this.$emit('update:modelValue', value);
    },
    input2f(e) {
      let { value } = e.target;
      if (this.textModifiers.toUpperCase) {
        value = value.toUpperCase();
      }
      this.$emit('update:text', value);
    },
  },
};
</script>

标签：自定义,default,type,update,value,vue3,组件,modelValue
来源： https://blog.csdn.net/skyblacktoday/article/details/116081638