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)

父组件:

<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>

 

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)" />

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程宝库

 vue3自定义js文件在vue3中自定义的js文件,如果需要设置全局this.xxx调用方式的话,需要给方法、变量、常量export出去,调用install()方法插件的功能范围没有严格 ...