vue.js 如何从父组件打开v对话框

dw1jzc5e 于 2023-08-07 发布在 Vue.js

关注(0)|答案(1)|浏览(127)

我目前正在用Vuetify 3开发一个前端，现在我已经多次思考DRY原则了。但有时候我对Vue和Vuetify感到困惑，因此给予了DRY。
我当前的示例是使用可重用的v-dialog从列表中选择一个项。我希望在父组件中有一个按钮来激活子组件，即对话框。如果我在对话框中选择一个项目，它将发出这个项目。
我现在面临的问题是，我不能让对话框打开摆在首位。
下面是子组件CustomSelector：

<template>
    <v-dialog>
        Some logic to displace the list and emit the selection
    </v-dialog>
</template>

字符串
在父组件中，我有一个按钮，用于切换子组件的v-model。

<template>
    <div>
        <v-btn @click="toggleCustomSelection">Select</v-btn>

        <custom-selector v-model="showCustomSelector"></custom-selector>
    </div>
</template>

<script setup>
    // imports and stuff

    const showCustomSelector = ref(false);

    function toggleCustomSelection() {
        showCustomSelector.value = !showCustomSelector.value;
    }
</script>

型
如果我不把CustomSelector实现为它自己的组件，而是直接把实际的对话框放在父组件中，那么它就可以工作。但是一旦我把它外包给它自己的组件，它就不再工作了。
我该怎么做？如果这不是通常的方法，那么还有什么更好的方法呢？

vue.js

来源：https://stackoverflow.com/questions/76845904/how-to-open-a-v-dialog-from-parent-component

1条答案

按热度按时间

s2j5cfk01#

我找到了一种方法来实现我正在寻找的东西。This question已经把我带到了正确的方向。
对于任何试图实现同样目标的人：您必须在子组件中定义modelValue属性，创建一个计算值并将其作为v-model赋值给v-dialog。这就是结果。

父组件

<template>
    <div>
        <v-btn @click="toggleCustomSelection">Select</v-btn>

        <custom-selector v-model="showCustomSelector"></custom-selector>
    </div>
</template>

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

    const showCustomSelector = ref(false);

    function toggleCustomSelection() {
        showCustomSelector.value = !showCustomSelector.value;
    }
</script>

字符串

子组件

<template>
    <v-dialog v-model="show">
        Some logic to displace the list and emit the selection

        <v-btn @click="close">Close</v-btn>
    </v-dialog>
</template>

<script setup>
    import { computed } from 'vue'

    const props = defineProps({ modelValue: Boolean });
    const emit = defineEmits(['update:modelValue']);

    const show = computed(function() { return props.modelValue; });

    function close() { emit('update:modelValue', false); }
</script>

型
现在，如果您希望子组件将数据实际传递给父组件，则只需向子组件添加额外的发射并在父组件中侦听它们。

赞(0）回复(0）举报 2023-08-07

我来回答

vue.js 如何从父组件打开v对话框

1条答案

相关问题

热门标签

最新问答