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

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

<!--父组件--!>
{{modelValue}}  {{msg}}
 <HelloWorld v-model:foo="modelValue" v-model:message="msg"></HelloWorld>
 

<!--子组件--!>
  <input type="text" :value="foo" @input="$emit('update:foo', $event.target.value)" />

 <input type="text" :value="message" @input="$emit('update:message', $event.target.value)" />/>
 

自定义修饰符的用法，

根据官方

//父组件

<HelloWorld v-model.capitalize="myText"></HelloWorld>
{{myText}}
setup(){
	return {  myText : ref(22); } //不加ref无法做到响应
}

//子组件
//自定义修饰符 capitalize  通过modelModifiers prop 提供给组件 忽视any
 <input type="text" :value="modelValue" @input="emitValue" />
  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 绑定

 <vModel v-model:foo.capitalize="bar"></vModel>
   props: {
    foo: {
      type: String
    },
    fooModifiers: {
      type: String
    }
  }
  created() {
    console.log(this.fooModifiers); // { capitalize: true }
  }
  <input type="text" :value="foo" @input="$emit('update:foo', $event.target.value)" />