Vue3:两个子组件的双向绑定

Question

我有三个组件Table.vue -> Filters.vue -> Selectbox.vue。Table.vue包含一个反应性变量options。

Table.vue

<script setup>
    import { reactive } from 'vue';
    import Filters from './Filters';

    defineProps({
        per_page_options: { type: Array, required: false },
    });

    const options = reactive({
        per_page: 10,
        current_page: 1,
    });
</script>

<template>
    <Filters :per_page="options.per_page" :per_page_options="per_page_options" />
</template>

Filters.vue用于将属性传递给不同的过滤器(为了使其简单，我只向下拉组件显示代码)

Filters.vue

<script setup>
    import { ref } from 'vue';

    const props = defineProps({
        per_page: { type: Number, required: false },
        per_page_options: { type: Array, required: false, default: () => [10, 20, 50] },
    });

    const results_per_page = ref(props.per_page || props.per_page_options[0]);
</script>

<template>
    <Selectbox :label="$t('result_per_page', 1)" :options="per_page_options" id="results_per_page" v-model="results_per_page" horizontal small />
</template>

per_page支柱不能链接到v模型到期突变，所以我创建了一个额外的参考文件，但这破坏了Table和Filters组件之间的绑定。我怎么才能解决这个问题？

Answer 1

您可以使用v-model，但是必须遵循命名模式：https://v3.vuejs.org/guide/component-custom-events.html#handling-v-model-modifiers。

另一个选项是有一个自定义发出，它在Table.vue中修改per_page选项，因为这里它是一个反应性的，可以修改。