javascript - 使用更改 Vue 3 Option api 将 Prop 的更改从父级传递给子级

Question

好的...国王...

当其他组件发生点击事件时，我试图将一个值传递给子组件，它将更改父组件的 Prop 值。但它只显示了第一个通过的挂载值。

发出变化的自上而下组件

<template>
<div class="dropdown">
    <button
      class="btn btn-secondary dropdown-toggle h-75"
      type="button"
      id="dropdownMenuButton1"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      {{ value }}
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1" role="menu">
      <li v-for="option in options" :key="option">
        <a
          class="dropdown-item"
          @click="(value = option);dunder;dundet;"
          href="javascript:void(0)"
          >{{ option }}</a
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TopDown",
  data() {
    return {
      options: ["Edit", "Delete"],
      value: "",
    };
  },
  computed:{
    dunder(){
     return this.$emit("edit-task", this.value) 

    },
    dundet(){
      return this.$emit("edit-task-index",this.value)
    }
  }
};
</script>


<style>
</style>

父组件

<template>
  <div
    v-for="(item, index) in tasker"
    :items="item"
    :key="index"
    class="border border-dark "
  >
    <section class="d-flex justify-content-between">
      <h4 class="w-50 font-weight-bold fs-5">
        <u>{{ item.title }}</u>
      </h4>
      <TopDown
        @edit-task="val"
        @edit-task-of="show(item, index)"
        
        :index="index"
      />
    </section>
    <p class="text-start">{{ item.description }}</p>
    <GoTask :showVal="showVal" :bool="bool" />
  </div>
</template>

<script>
import TopDown from "@/components/TopDown.vue";
import GoTask from "@/components/GoTask.vue";

export default {
  inheritAttrs: false,
  components: {
    TopDown,
    GoTask,
  },
  data() {
    return {
      takss: {
        items: "sss",
        index: "",
      },
      showVal: "",
      bool: false,
    };
  },
  name: "Taski",
  props: ["tasker"],
  methods: {
    show(item, index) {
      this.takss.items = item;
      this.takss.index = index;
          
    },
    val(val) {
      if (val == "Edit") {
        setTimeout(() => {
          console.log(this.takss);
          this.showval = this.takss;
          console.log(this.showval);
          console.log(this.bool)
        }, 1000);
          this.bool = !this.bool;
      }
    },
  },
};
</script>

<style></style>

子组件

<template>
  <section
    v-if="bools"
    class="bg-white"
    style="z-index: 20"
    @click="closeModal"
  ></section>
  <section
    v-if="bools"
    class="position-absolute"
    style="
      z-index: 50;
      left: 50%;
      top: 50%;
      height: 100vh;
      margin-top: 20vh;
    "
  >
    <form
      class="mt-10"
      @submit.prevent="editTask"
    >
      <input
        class="border rounded p-2 mb-2"
        v-model.lazy="newTask.title"
        placeholder="Title"
        type="text"
      />
      <textarea
        ref="texsearch"
        rows="20"
        class=" p-2 mb-2"
        v-model.lazy="newTask.description"
        placeholder="Task Details"
        type="text"
      ></textarea>
      <button
        class="border rounded p-2 bg-success text-white"
        type="submit"
        @submit.prevent=""
      >
        New Task
      </button>
    </form>
  </section>
  <button @click="test">dd</button>
</template>

<script>
export default {
  inheritAttrs: false,
  name: "GoTask",
  props: ["tasker", "showVal", "bool"],
  data() {
    return {
      showVals: this.showVal,
      bools: this.bool,
      newTask: {
        title: "",
        description: "",
      },
    };
  },
  methods: {
    test() {
      console.log(this.bools);
      console.log(this.showVal);
    },
    ModalOpen() {
      this.bools = true;
    },
    closeModal() {
      this.bools = false;
    },
    showModal() {
      this.bools = true;
      // auto focus
      this.$nextTick(() => {
        this.$refs.textsearch.focus();
      });
    },
    showtheVal() {
      console.log(this.showtheVal);
    },
  },
};
</script>

<style></style>

当我单击其他组件的按钮时，它会发出 @edit-task-of 和 @edit-task 的更改，它不会将 bool 和 showval 的新值发送到子组件，bool 值仍然为 false 与首先 mount 和 showVal = ""当单击运行测试功能的按钮时在子项上查看这两个值。我是 vue 的新手。谢谢

Answer 1

你在 GoTask 组件，方法 test 中犯了错误，首先是 console.log(this.bools);，bools 是本地状态，在 prop bool 更改后不会更新，只需执行正确的 console.log(this.bool);。您不需要将 props 设置为本地状态，您可以直接使用 props。 GoTask 正确示例:

props: ["tasker", "showVal", "bool"],
data() {
    return {
      newTask: {
        title: "",
        description: "",
      },
    };
},
methods: {
    test() {
      console.log(this.bool);
      console.log(this.showVal);
    },

codesandbox