当前位置:   article > 正文

vue3 自定义 v-model(无参数和带参数)【setup版】(两种方案)

vue3 自定义 v-model(无参数和带参数)【setup版】(两种方案)

vue2 自定义 v-model 详见 https://sunshinehu.blog.csdn.net/article/details/136942322

vue3 自定义 v-model【方案一】

子组件 Child.vue

<script setup>
defineProps(["modelValue"]);
const emits = defineEmits();
</script>

<template>
  <input
    type="text"
    :value="modelValue"
    @input="emits('update:modelValue', $event.target.value)"
  />
</template>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

父组件

<script setup>
import { ref } from "vue";
import Child from "./Child.vue";

const msg = ref("");
</script>

<template>
  <div>
    {{ msg }}
    <Child v-model="msg" />
  </div>
</template>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

技术要点

vue3 中,若 v-model 未配置参数,则

  • 父组件给子组件传入了名为 modelValue 的 prop
  • 父组件监听了子组件的自定义事件 update:modelValue

v-model 带参数

vue3 支持多个v-model,且可带参数

父组件

<script setup>
import { ref } from "vue";
import Child from "./Child.vue";

const title = ref("");
const msg = ref("");
</script>

<template>
  <div>
    <p>{{ title }}</p>
    <p>{{ msg }}</p>
    <Child v-model:title="title" v-model:msg="msg" />
  </div>
</template>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

子组件

<script setup>
defineProps(["title", "msg"]);
const emits = defineEmits(["update:title", "update:msg"]);
</script>

<template>
  <input
    type="text"
    :value="title"
    @input="emits('update:title', $event.target.value)"
  />

  <input
    type="text"
    :value="msg"
    @input="emits('update:msg', $event.target.value)"
  />
</template>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

vue3 自定义 v-model【方案二】推荐

<!-- 组合式 API vue3.4+ -->
<script setup>
const model = defineModel()
</script>

<template>
	<input v-model="model">
</template>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

defineModel() 返回的值是一个 ref

  • 它的 .value 和父组件的 v-model 的值同步
  • 当它被子组件变更时,会触发父组件绑定的值一起更新

v-model 带参数

以参数 “title” 为例

<!-- 组合式 API vue3.4+ -->
<script setup>
const title = defineModel('title')
</script>

<template>
  <input type="text" v-model="title" />
</template>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

父组件

<MyComponent v-model:title="bookTitle" />
  • 1
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/704448
推荐阅读