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

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

//父组件 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 } }