vue 自定义组件实现 v-model

1、vue2 原生组件

<input :value="val" @input="val = $event.target.value" />
<h2>{{ val }}</h2>
<script>
export default {
  data() {
    return {
      val: "",
    };
  },
};
</script>

直接在原生组件中使用v-model

<input v-model="val" />

2、vue2 自定义组件(输入框)

<my-component :value="val2" @input="val2 = arguments[0]"></my-component>
<h2>{{ val2 }}</h2>
<script>
import MyComponent from "./components/MyComponent.vue";
export default {
  data() {
    return {
      val2: "",
    };
  },
  components: {
    MyComponent,
  },
};
</script>

MyComponent.vue

<template>
  <div>
    <input :value="value" @input="updateInput" />
  </div>
</template>
<script>
export default {
  name: "MyComponent",
  props: {
    // vue2,默认用value，如果不是输入框input，而是单选按钮等，需要另外处理
    value: String,
  },
  methods: {
    updateInput(e) {
      this.$emit("input", e.target.value)
    },
  },
};
</script>

直接在自定义组件中使用v-model

<my-component v-model="val2"></my-component>

vue2,默认用value，如果不是输入框input，而是复选框等，需要另外处理

3、vue2 自定义组件(复选框)

<my-checkbox :checked="checked" @change="checked = arguments[0]"></my-checkbox>
<h2>{{ checked }}</h2>

<script>
import MyCheckbox from "./components/MyCheckbox.vue";
export default {
  data() {
    return {
      checked: false
    };
  },
  components: {
    MyCheckbox,
  },
};
</script>

MyCheckbox.vue

<template>
  <div>
    <input type="checkbox" :checked="checked" @change="updateInput" />
  </div>
</template>

<script>
export default {
  name: "MyCheckbox",
  props: {
    checked: Boolean,
  },

  model: {
    prop: "checked", // 想要绑定的属性
    event: "change", //触发事件的名称
  },

  methods: {
    updateInput(e) {
      this.$emit("change", e.target.checked);
    },
  },
};
</script>

直接在自定义组件中使用v-model

<my-checkbox v-model="checked"></my-checkbox>

4、vue3对vue2的model属性进行了大改造

在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

<my-component
      :modelValue="value"
      @update:modelValue="value = $event"
    ></my-component>
<h2>{{ value }}</h2>

<script lang="ts">
import { defineComponent, ref } from "vue";
import MyComponent from "./components/MyComponent.vue";

export default defineComponent({
  components: {
    MyComponent,
  },
  setup() {
    const value = ref("");
    return {
      value,
    };
  },
});
</script>

MyComponent.vue

<template>
  <div>
    <input type="text" :value="val" @input="updateValue" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "MyComponent",
  setup(props, context) {
    const val = ref("");
    const updateValue = (e: Event) => {
      const targetValue = (e.target as HTMLInputElement).value;
      val.value = targetValue;
      context.emit("update:modelValue", targetValue);
    };
    return { val, updateValue };
  },
});
</script>

直接在自定义组件中使用v-model

<my-component v-model="value"></my-component>