Vue3 v3.4之前如何实现组件中多个值的双向绑定？

文章目录

基础代码
1. watch
2. computed（推荐）

官方给的例子是关于el-input的，如下。但是@input不是所有组件标签都有的属性啊，有没有一种通用的办法呢？

<script setup>
defineProps({firstName: String,lastName: String
})defineEmits(['update:firstName', 'update:lastName'])
</script><template><inputtype="text":value="firstName"@input="$emit('update:firstName', $event.target.value)"/><inputtype="text":value="lastName"@input="$emit('update:lastName', $event.target.value)"/>
</template>

基础代码

以一个Dialog组件为例。我们自己写一个course-buy.vue

<template><el-dialogv-model="localValue.dialogVisible"title="Warning"width="500"align-center><span>Open the dialog from the center from the screen</span><template #footer><div class="dialog-footer"><el-button @click="localValue.dialogVisible = false">Cancel</el-button><el-button type="primary" @click="localValue.dialogVisible = false">Confirm</el-button></div></template></el-dialog>
</template>
<script setup lang="ts">
import {PropType} from "vue";//对外变量
const props = defineProps({dialogVisible: Object as PropType<boolean>,courseId: Object as PropType<string | number>,
})
const emit = defineEmits(['update:dialogVisible','update:courseId'])
//本地变量
const localValue = reactive({dialogVisible: props.dialogVisible,courseId: props.courseId
})</script>

外部在使用时（假设为base.vue），如下使用

<template><CourseBuyv-model:dialog-visible="orderPayParams.dialogVisible"v-model:course-id="orderPayParams.courseId"/>
</template>
<script setup lang="ts">
const orderPayParams = reactive({dialogVisible: false,courseId: 1
});
</script>

上述代码，course-buy.vue中真正使用的变量是localValue本地变量，localValue的值来自base.vue。
但是上述的基础代码，dialogVisible和courseId的值只能从base.vue流向course-buy.vue。
如何实现course-buy.vue本身修改localValue的值后，修改变化同步到base.vue呢？

1. watch

如果要让dialogVisible双向绑定，可以写两个watch互相监听并更新。要实现courseId双向绑定也是同理。

<script setup lang="ts">
import {PropType} from "vue";//对外变量
const props = defineProps({dialogVisible: Object as PropType<boolean>,courseId: Object as PropType<string | number>,
})
const emit = defineEmits(['update:dialogVisible','update:courseId'])
//本地变量
const localValue = reactive({dialogVisible: props.dialogVisible,courseId: props.courseId
})
//值双向绑定
watch(() => props.dialogVisible, (newValue) => {localValue.dialogVisible = newValue;
});
watch(() => localValue.dialogVisible, (newValue) => {emit('update:dialogVisible', newValue);
});
</script>

2. computed（推荐）

不过使用computed可以更简洁，性能也更好。

<script setup lang="ts">
import {PropType} from "vue";//对外变量
const props = defineProps({dialogVisible: Object as PropType<boolean>,courseId: Object as PropType<string | number>,
})
const emit = defineEmits(['update:dialogVisible','update:courseId'])
//本地变量
const localValue = reactive({dialogVisible: computed({get: () => props.dialogVisible,set: (value) => emit('update:dialogVisible', value)}),courseId: props.courseId
})
</script>