快捷導(dǎo)航

vue3自定義組件之v-model實現(xiàn)父子組件雙向綁定

更新時間：2022年08月09日 10:08:13 作者：Mosowe

這篇文章主要介紹了vue3自定義組件之v-model實現(xiàn)父子組件雙向綁定方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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默認對應(yīng)的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)" />/>

在這里插入圖片描述

自定義修飾符的用法，

根據(jù)官方

//父組件
<HelloWorld v-model.capitalize="myText"></HelloWorld>
{{myText}}
setup(){
	return {  myText : ref(22); } //不加ref無法做到響應(yīng)
}
//子組件
//自定義修飾符 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);
    }
  }  
//對于帶參數(shù)的 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)" />

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: