VUEJS - 如何使用子组件中的数据变量到父组件中

Question

我正在尝试将我的代码重构为几个组件，以便它看起来更具可读性和更清晰，但我对如何在父组件中使用数据变量子组件感到困惑。在 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

道具是给父母的 ->孩子
您可以使用 $emit for child -> 父级中的父级

：

• 使用addPI_ID控制对话框（显示/隐藏），通过props将值从父级传递给子级
• 监听事件“update”将使用 addPI_ID 的新值从子级发送到父级
• 当按钮按下时，将 addPI_ID 的值更改为 true（显示对话框） 点击ADD

<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”给父级（使用新值addPI_ID ），每当我们设置“show”的值时。当我们读取“show”(get)的值时，它会返回道具addPI_ID的当前值，
• 道具addPI_ID从父级接收值

<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>

希望有帮助！ ;)

Answer 2

我不确定我是否正确理解你的问题，但我认为你不应该将“false”传递到父级中的模态标识符元素中。您应该传入 addPI_ID 的实际值，如下所示：

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

如果尚未声明，您还应该在父级中声明一个变量 addPI_ID：

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