希望指令 <v-model> 能够跨组件自动上溯
What problem does this feature solve?
当全局有一个值在多个组件共享(数据源相同)时,必须通过编写事件才能保证值的下发,下面是一个简单的组件嵌套的示例:
<!-- VueTree.vue -->
<template>
<ul v-for="(item,index) in items" :key="index">
<button @click="emit('select', item)">{{ item.text }}</button>
<!-- 在实际业务中往往比较复杂,需要写大量的 prop 绑定和数据上报的事件 -->
<vue-tree
v-if="item.items?.length"
:items="item.items"
:selected="selected"
@select="emit('select', $event)"
/>
</ul>
</template>
<script lang="ts" setup>
interface Item {
text: string
items?: Item[]
}
defineProps<{
items: Item[]
selected: Item | undefined
}>()
const emit = defineEmits<{
(event: 'select', item: Item): void
}>()
</script>
What does the proposed API look like?
如果将同一个数据源应用于 v-model 指令,那么它应该可以自动上溯到达起点,下面是利用 v-model 实现 VueTree.vue 的实现
<!-- VueTree.vue -->
<template>
<ul v-for="(item,index) in items" :key="index">
<button @click="emit('updated:selected', item)">{{ item.text }}</button>
<!-- 不管业务如何复杂,只需要 v-model:* 搞定,不需要写上报事件就能自动溯源,减少出错 -->
<vue-tree
v-if="item.items?.length"
:items="item.items"
v-model:selected="selected"
/>
</ul>
</template>
<script lang="ts" setup>
interface Item {
text: string
items?: Item[]
}
defineProps<{
items: Item[]
selected: Item | undefined
}>()
const emit = defineEmits<{
(event: 'updated:selected', item: Item): void
}>()
</script>
Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.
Also, open issues in English.