Vue3组件数据双向绑定

目录

组件数据的双向绑定

利用组件通信机制手搓

使用defineModel语法

效果：

defineModel()研究

defineModel的底层机制

defineModel参数

ref选项

ref名字

---

组件数据的双向绑定

Vue3中的组件数据双向绑定是困扰作者许久的问题，今天因为公司需要，系统的学习了一遍，发现很多有趣的东西，为此在这里记录下来，希望可以帮助到同学们。

目前对于组件数据的双向绑定 有两种形式："利用组件通信机制手搓"（啰嗦，但有助于理解原理 ）、"使用defineModel语法"（Vue3.4+更新，方便快捷）

利用组件通信机制手搓

• defineProps：接收父组件的数据（正向更新）
• defineEmits：向父组件传递数据（反向更新）

下面我们用一个"子组件封装一个输入框，父组件调用并实时显示数据"的例子来说明：

子组件（child.vue）：

<script setup>
const props = defineProps({
    label:{
        type: String,
        default: "测试名"
    },
	modelValue:{
		type: String,
		default: "测试值"
	}
})

const emits = defineEmits(['update:modelValue'])

</script>

<template>
	<div>
		<span>{{ props.label }}</span>
		<input type="text" :value="props.modelValue" @input="emits('update:modelValue',$event.target.value)">
	</div>
</template>

<style scoped>
</style>

父组件（App.vue）：

<script setup>
import { ref } from 'vue';
import child from './components/child.vue';

const inputValue = ref('');

</script>

<template>
<div class="container">
    <child 
        :modelValue="inputValue"
        @update:modelValue="inputValue = $event"
    />
    <p>{{ inputValue }}</p>
</div>
</template>

<style scoped>
</style>

注意：

• update:modelValue ：这是Vue3里约定的更新数据的事件名，格式为"update:prop"，在这个代码中，prop 是modelValue ，因此事件名为"update:modelValue"
• @input：当输入框数据发生变化时，向父组件传递数据

此时，你可能会发现，父组件要使用："modelValue "和"update:modelValue "两处属性槽，比较啰嗦。那么此时就可以使用Vue3 提供给我们的一个"v-model "语法糖：

<child 
    v-model="inputValue"
/>

上面的代码就相当于：

<child 
    :modelValue="inputValue"
    @update:modelValue="inputValue = $event"
/>

值得注意的是："尽管父组件可以使用v-model省略，但是子组件的update:modelValue事件不可省略"

使用defineModel语法

使用defineModel 语法要求Vue 版本大于3.4

子组件（child.vue）：

<script setup>
const model = defineModel()
const props = defineProps({
    label:{
        type: String,
        default: "测试名"
    }
})
</script>

<template>
	<div>
		<span>{{ props.label }}</span>
		<input type="text" v-model="model" />
	</div>
</template>

<style scoped>
</style>

父组件（App.vue）：

<script setup>
import { ref } from 'vue';
import child from './components/child.vue';

const inputValue = ref('');

</script>

<template>
<div class="container">
    <child 
        v-model="inputValue"
    />
    <p>{{ inputValue }}</p>
</div>
</template>

<style scoped>
</style>

效果：

可以看到使用defineModel() 可以非常轻松地实现组件间的双向数据绑定

defineModel()研究

defineModel的底层机制

defineModel 返回的值是一个ref

defineModel是一个便利宏，编译器会解析为：

• 一个名为modelValue 的prop，本地ref的值与其同步
• 一个名为update:modelValue 的事件，当本地ref的值发生变更时修改

大白话：

• defineModel返回一个ref，当这个ref值变化时，会自动调用defineModel解析的update:modelValue事件
• defineModel解析的update:modelValue事件会传递当前ref的值

defineModel参数

ref选项

defineModel 可以接收一个"对象 "来配置ref的一些选项

// 该v-model必填
const model = defineModel({required: true})
// 默认值
const model = defineModel({default: 0})

注意：

• 当给model绑定一个"default默认值"时，如果父组件传入的v-model参数有值，那么该默认值会被顶替
• 如果父组件传入的v-model参数为空，那么该默认值会生效，但父组件与子组件之间不同步，此时父组件值为空，子组件值为默认值

子组件（child.vue）

<script setup>
const model = defineModel({default: "123"})
const props = defineProps({
    label:{
        type: String,
        default: "测试名"
    }
})
</script>
<template>
	<div>
		<span>{{ props.label }}</span>
		<input type="text" v-model="model"/>
	</div>
</template>
<style scoped>
</style>

父组件（parent.vue）

<script setup>
import { ref } from 'vue';
import child from './components/child.vue';

const titleValue = ref();

</script>

<template>
<div class="container">
    <child 
        v-model="titleValue"
    />
    <p>{{ titleValue }}</p>
</div>
</template>

<style scoped>
</style>

效果：

当组件初次载入时，此时父组件和子组件之间的数据不同步，当修改子组件数据后，父子组件数据同步

原因：

• 组件载入时，父组件向子组件传参数值，参数值为空，因此子组件默认值生效，子组件参数值为123
• 子组件默认值生效后，没有向父组件传递参数值，此时父组件参数值仍为空
• 当子组件参数值修改后，触发底层update:modelValue方法，向父组件传递参数值
• 父组件接收到参数值，修改本地参数值，实现数据同步

ref名字

defineModel 可以接收一个"字符串"作为返回ref的名字，利用该特性我们可以同时绑定多个v-model

用法：

// 指定一个title名字
const model = defineModel('title')
// 父组件调用时，指定传给名为title的ref
<child 
    v-model:title="inputValue"
/>

多个v-model绑定：

子组件（child.vue）

<script setup>
const modelTitle = defineModel('title')
const modelDescription = defineModel('description')
const props = defineProps({
    label:{
        type: String,
        default: "测试名"
    }
})
</script>
<template>
	<div>
		<span>{{ props.label }}</span>
		<input type="text" v-model="modelTitle" style="margin-right: 1rem"/>
		<input type="text" v-model="modelDescription" />
	</div>
</template>
<style scoped>
</style>

父组件（parent.vue）

<script setup>
import { ref } from 'vue';
import child from './components/child.vue';

const titleValue = ref('');
const descriptionValue = ref('');

</script>

<template>
<div class="container">
    <child 
        v-model:title="titleValue"
        v-model:description="descriptionValue"
    />
    <p>{{ titleValue }}</p>
    <p>{{ descriptionValue }}</p>
</div>
</template>

<style scoped>
</style>

效果：