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

vue3 v-model父子组件双向绑定

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

// vue2的v-model双向绑定方法
model: {
     prop: 'value', //3.x默认值改为了modelValue
     event: 'input' //3.x默认值改为了update:modelValue
   },
//使用 this.$emit('input', index);

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

父组件：

子组件：

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

父组件：

子组件：

vue3.x去掉了v-model的.sync修饰符

其他的比如.trim依然可以使用，新增自定义修饰符

父组件

子组件 

vue3 v-model使用(多个 v-model 绑定)

//父组件
setup(props) {
	const msg = ref("msg");
	const foo = ref('123')
	return{
	foo,msg
	}
}

{{modelValue}}  {{msg}}
 
 

  
 />
 

自定义修饰符的用法，

根据官方

//父组件

{{myText}}
setup(){
	return {  myText : ref(22); } //不加ref无法做到响应
}
//子组件
//自定义修饰符 capitalize  通过modelModifiers prop 提供给组件 忽视any
 
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({ capitalize: false })
    }
  },
  created() {
    console.log(this.modelModifiers); // { capitalize: true }
  },
  methods: {
    emitValue(e: any) {
      let value: any = e.target.value;
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1);
      }
      this.$emit("update:modelValue", value);
    }
  }  
//对于带参数的 v-model 绑定
 
   props: {
    foo: {
      type: String
    },
    fooModifiers: {
      type: String
    }
  }
  created() {
    console.log(this.fooModifiers); // { capitalize: true }
  }
  

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。