VUEJS - 如何使用 child 组件中的数据变量到 parent

Question

我正在尝试将我的代码重构为耦合组件，以便它看起来更具可读性和更清晰，但我对如何在 parent 中使用数据变量 child 组件感到困惑。在 ModalIdentifier 中 addPI_ID 它应该设置为 false 这样我们点击 ADD 按钮模态标识符将设置为 true 并且模态将弹出

ModalIdentifier.vue (child)

<template>
  <v-dialog v-model="addPI_ID" width="600">
  </v-dialog>
</template>

export default {
   props: ["addPI_ID"],
}

addUser.vue(parent)

<template>
  <div>
    <modal-identifier :addPI_ID="false"></modal-identifier>

    //there's button, if we click that modal identifier dialog will pops up
    <v-btn
        color="#8FC23E"
        class="mt-3 mb-6"
        @click="addPI_ID = true"
    >ADD</v-btn>
  </div>
</template>

这部分我很困惑，什么是更好的主意？

Answer 1

我不确定我是否正确理解了你的问题，但我认为你不应该将“false”传递给父级的 modal-identifier 元素。你应该传入 addPI_ID 的实际值，像这样：

<modal-identifier :addPI_ID="addPI_ID"></modal-identifier>

如果您还没有在父级中声明变量 addPI_ID：

  data: {
    ...
    addPI_ID: false,
  },

Answer 2

道具适用于 parent -> child
您可以将 $emit 用于 child -> parent

在parent中：

使用addPI_ID控制对话框(show/hide)，通过props从parent 到 child
监听事件“update”emitted 从 child 到 parent 新值共 addPI_ID
单击“添加”按钮时将 addPI_ID 的值更改为真（显示对话框）

<modal-identifier :addPI_ID="addPI_ID" v-on:update="addPI_ID = $event"></modal-identifier>
<v-btn color="#8FC23E" class="mt-3 mb-6" @click="addPI_ID = true">ADD</v-btn>

在child中：

创建一个计算属性“show”，以发出我们的自定义事件“update”到parent（新值addPI_ID），每当我们设置“show[=42的值=]”。当我们读取“show”的值时（获取）它 returns 我们道具的当前值 addPI_ID

Prop addPI_ID 从 parent
接收值

<template> <div> <v-dialog v-model="show" width="600"> <v-btn color="primary" @click="show = false">Close</v-btn> </v-dialog> </div> </template> <script> export default { props: { addPI_ID: Boolean }, computed: { show: { get() { return this.addPI_ID; }, set(addPI_ID) { this.$emit('update', addPI_ID); }, }, }, }; </script>

希望对您有所帮助！ ;)

VUEJS - 如何使用 child 组件中的数据变量到 parent

VUEJS - How to use data variable from child component into parent

vue.js

vuetify.js

vue-props