Глубокое понимание использования пользовательских компонентов v-model (сравнительный анализ vue3 и vue2)

Vue.js

Согласно статье под названием «Глубокое понимание использования формы v-model«В основном, у вас есть глубокое понимание v-model, давайте посмотрим, как его можно использовать в пользовательских компонентах.

в vue3

при использовании в пользовательских компонентахv-model, компонент получает свойствоmodelValueзначение, затем с помощью запускаupdate:modelValueсобытие для обновления значения:

<custom-comp v-model="msg"></custom-comp>
<!-- 等价于 -->
<custom-comp :model-value="msg" @update:model-value="msg = $event"></custom-comp>
<!-- 建议命名按照kebab-cased规范，如：model-value，而不是modelValue -->

реализация v-модели

В соответствии с приведенными выше правилами определения мы можем реализовать пользовательский компонент ввода следующим образом:

// 示例1：自定义input组件
// 实现1：
app.component('custom-input', {
  props: ['modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `,
});
// 实现2：使用input的v-model + computed(计算属性)
app.component('custom-input', {
  props: ['modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(v) {
        this.$emit('update:modelValue', v);
      },
    },
  },
  template: `
    <input v-model="value">
  `,
});

использовать:

<custom-input v-model="msg"></custom-input>;

Приведенный выше пример - это только упаковка для ввода. Если вы не содержали ввод внутри пользовательского компонента? Для того, чтобы углубить понимание, давайте посмотрим на пользовательский компонент подсчета:

// 示例2：自定义count组件
app.component('custom-count', {
  props: {
    modelValue: Number,
  },
  methods: {
    increment() {
      this.$emit('update:modelValue', ++this.modelValue);
    },
    decrement() {
      this.$emit('update:modelValue', --this.modelValue);
    },
  },
  template: `
    <button @click="increment">+1</button> ~ 
    <button @click="decrement">-1</button>
    <p>{{modelValue}}</p>
  `,
});

использовать:

<custom-count v-model="num"></custom-count>;

Давайте посмотримдобиться эффекта:

параметр v-модели

В примере мы обнаруживаем, что v-model является принимающим свойством.modelValueЗначение, то срабатывание событияupdate:modelValueчтобы обновить значение, можем ли мы изменить имя атрибутаmodelValueШерстяная ткань? Как это сделать? На самом деле, нам нужно только датьv-modelВы можете добавлять параметры, такие как:v-model:mvТак будетmodelValueзаменяетсяmv.

app.component('custom-input', {
  props: ['mv'],
  template: `
    <input
      :value="mv"
      @input="$emit('update:mv', $event.target.value)"
    >
  `,
});


<custom-input v-model:mv="msg"></custom-input>;

Несколько привязок v-модели

Именно из-за нового параметра v-model, передаваемого в vue3, пользовательские компоненты могут поддерживать как多个v-modelПривязки:

<user-name v-model:first-name="firstName" v-model:last-name="lastName"></user-name>

Реализация компонента становится:

app.component('user-name', {
  props: {
    firstName: String,
    lastName: String,
  },
  template: `
    <input 
      type="text"
      :value="firstName"
      @input="$emit('update:firstName', $event.target.value)">

    <input
      type="text"
      :value="lastName"
      @input="$emit('update:lastName', $event.target.value)">
  `,
});

добиться эффекта:

в vue2

при использовании в пользовательских компонентахv-model, компонент получает свойствоvalueзначение, затем с помощью запускаinputсобытие для обновления значения, которое реализуетv-model:

<custom-comp v-model="msg"></custom-comp>
<!-- 等价于 -->
<custom-comp :value="msg" @input="msg = $event"></custom-comp>

реализация v-модели

Реализация аналогична, давайте посмотрим на реализацию пользовательского компонента ввода в vue2:

// 示例1：自定义input组件
Vue.component('comp-input', {
  props: {
    value: String,
  },
  template: `
    <input
      type="text"
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `,
});

Пользовательский атрибут V-модели

Он также поддерживается в VUE2 для изменения имени принятого атрибута, но в отличие от Vue3, Vue2 - указание атрибутов в компонентахmodelизpropа такжеeventмодифицировать:

// 示例2：自定义count组件
Vue.component('custom-count', {
  model: {
    prop: 'v', // default: value
    event: 'i', // default: input
  },
  props: {
    v: Number,
  },
  data() {
    return {
      count: this.v,
    };
  },
  template: `<button @click="$emit('i', ++count)">+1</button>`,
});

Мы видим, что в этом примере есть еще одинmodel属性и задает два свойства:propа такжеeventДа-да, это обязательные атрибуты v-модели и имя события, но их значение по умолчаниюvalueа такжеinputМы реализуем настройку, изменяя опоры и событие модели модели.

онлайн эффект:

Зачем выходить на образцовую собственность,официальная документацияТакже указано, что это позволяет избежать конфликтов с v-моделью, когда она имеет другое использование со значением значения, например, переключатели и флажки.Подробности см. на официальном сайте.Пример.

Суммировать

Мы объяснили v-модель пользовательских компонентов через реализацию в vue3 и vue2, и мы также можем найти различия:

  1. Vue3 Имя свойства по умолчанию, имя события:modelValueа такжеupdate:modelValue; а в vue2 это:valueа такжеinput;
  2. В vue3 напрямую передайте параметры за v-modelv-model:fooчтобы указать имя свойства, и изменение отражается в родительском компоненте, и支持绑定多个 v-model; Vue2 через подсменовmodel 属性中的prop值和event值Чтобы указать имена атрибутов и имена событий, измените его в подкомпонентах.

Давайте посмотрим на следующий: "Углубленное понимание модификатора v-model (сравнительный анализ vue3 и vue2)".

Приветственное сообщение обсудить или добавить обмен микро письмом (cleam_lee).

Категории