v-model

vue 相关 v-model

<input v-model="searchText" />
//等于
<input value="searchText" @input="searchText = $event.target.value" />

v-model 应用于子组件

• 在 vue2 中 v-model 默认的 props 属性名是 value，默认绑定的 emit 事件是
  input。见 vue2 官网

• 以下为 vue3 写法

• v-model 对应子组件中的 props 属性名称是 modelValue(vue 中定义的)

• v-model 中子组件中内部定义了 emit('update:modelValue', $event.target.value)可被父组件的 input 事件识别，就不用再写 @update:modelValue="(val)=>parentIn=val"

<template>
  <div>
    <el-input
      :modelValue="props.modelValue"
      placeholder="child"
      @input="(val) => emit('update:modelValue', val)"
    />
    //html原生组件写法
    <!-- <input
     :value="props.modelValue"
     @input="emit('update:modelValue', $event.target?.value)"
   > -->
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    modelValue: {
      type: String,
      default: "i am child",
    },
  });
  const emit = defineEmits(["update:modelValue"]);
</script>

//父组件写法
<template>
  <div>
    <c-input v-model="parentIn" />
  </div>
</template>
<script setup lang="ts">
  import CInput from "@/components/CInput.vue";
  import { ref, watchEffect } from "vue";

  const parentIn = ref("parent");
  watchEffect(() => {
    console.log("parentIn", parentIn.value);
  });
</script>

• 默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件 其实 v-model 全写为 v-model:modelValue="bookTitle"

• 可以通过向 v-model传递参数来修改这些名称官方文档原文地址

//代码重点部分
app.component('my-component', {
  props: {
    title: String
  },
  emits: ['update:title'],
  template: `
    <input
      type="text"
      :value="title"
      @input="$emit('update:title', $event.target.value)">`

<my-component v-model:title = "bookTitle" > </my-component>

• 如果不用 v-model 使用自定义属性也可以达到相同效果

//子组件
<template>
  <div>
    <el-input
      :modelValue="props.value"
      placeholder="child"
      @input="(val) => emit('update:value', val)"
    />
    //html原生组件写法
    <!-- <input
     :value="props.value"
     @input="($event:Event) => emit('update:value', $event.target?.value)"
   > -->
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    value: {
      type: String,
      default: "i am child",
    },
  });
  const emit = defineEmits(["update:value"]);
</script>

//父组件
<template>
  <div>
    <c-input :value="parentIn" @update:value="(val)=>parentIn=val" />
  </div>
</template>
<script setup lang="ts">
  import CInput from "@/components/CInput.vue";
  import { ref, watchEffect } from "vue";

  const parentIn = ref("parent");
  watchEffect(() => {
    console.log("parentIn", parentIn.value);
  });
</script>

v-model 附加

• 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

<input v-model.trim="msg" />