当前位置：首页 > article >正文

vue3的组件v-model（defineModel()宏）

article 2025/1/24 21:55:48

这里展示的是vue3.4版本之前的如何在组件上使用以实现双向绑定

<template>
    <p>我是子组件</p>
    <input :value="props.modelValue" @input="handelInput"/>
</template>

<script lang="ts" setup>
    const props = defineProps({
     modelValue: {
            default: '',
            type: String,
        }
    })

    const emits = defineEmits(['update:modelValue']);
    cosnt handelInput = (e)=>{
     emits('update:modelValue', e.target.value);
}
</script>

<template>
<p>我是父组件</p>
<Child v-model="msg">

</template>


<script lang="ts" setup>
    const msg = ref('v-model调试')
</script>

v-model 的参数

在 v-model中学到的指定参数，我们可以在单个组件实例上创建多个 v-model 双向绑定。

<template>
    <p>我是子组件</p>
    <input :value="props.msg" @input="handelInput"/>
    <input :value="props.msg2" @input="handelInput2"/
</template>

<script lang="ts" setup>
    const props = defineProps({
     msg: {
            default: '',
            type: String,
        },
     msg2: {
            default: '',
            type: String,
        },
    })

    const emits = defineEmits(['update:msg'，'update:msg2']);
    cosnt handelInput = (e)=>{
     emits('update:msg', e.target.value);
    }
cosnt handelInput2 = (e)=>{
     emits('update:msg2', e.target.value);
    }
</script>

<template>
<p>我是父组件</p>
<Child v-model:msg="msg" v-model:msg2="text">

</template>


<script lang="ts" setup>
    const msg = ref('v-model调试')
    const text = ref('v-model多个参数调试')
</script>

从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏：

<!-- Child.vue -->
<template>
    <p>我是子组件</p>
  <div>展示父组件传来的双向绑定值: {
  
  { model }}</div>
  <button @click="update">Increment</button>
</template>


<script setup>
const model = defineModel()

const update =()=>{
  model.value++
}
</script>

<!-- Parent.vue -->
<template>
    <p>我是父组件</p>
    <Child v-model="countModel" />
</template>
<script lang="ts" setup>
    const countModel = ref(0)
</script>

defineModel() 返回的值是一个 ref(所以使用的时候要.value)。它可以像其他 ref 一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用：

上面还讲到带参的v-model，那么defineModel如何带参呢：

<!-- MyComponent.vue -->
<template>
   <p>我是子组件</p>
  <input type="text" v-model="title" />
  <input type="text" v-model="content" />
</template>


<script setup>
const title = defineModel('title')
const content = defineModel('content')
</script>

<template>
<p>我是父组件</p>
<MyComponent v-model:title="bookTitle"  v-model:content="bookContent"/>
</template>
<script lang="ts" setup>
    const  bookTitle = ref('bookTitle')
    const  bookContent = ref('bookContent')
</script>

参考文档：组件 v-model | Vue.js

查看全文

http://www.kler.cn/a/516852.html