观看从父母到孩子的道具变化

Question

我试图在以下解决方案中实现观察者： How to listen for 'props' changes

我有一个名为“selectedItem”的属性，我试图将其传递给一个孩子并监视出现的值，以便我可以通过处理程序对其进行一些操作，但手表没有被触发出于某种原因。

这里是父子代码：

父（产品组件）：

<template>
  <div class="container">
    <Popup item="selectedItem" />

    <b-table striped hover :items="products" :fields="fields">
      <template #cell(Edit)="data">
        <b-button
          v-b-modal="'edit-modal'"
          v-on:click="setSelectedItem(data.item)"
          variant="warning"
        >
          Edit
        </b-button>
      </template>
    </b-table>
  </div>
</template>

<script>
import Popup from "./Popup";

export default {
  name: "Products",
  components: { Popup },
  data() {
    return {
      products: [],
      countries: [],
      fields: [],
      selectedItem: null,
    };
  },
  methods: {
    getProducts() {
      fetch("http://localhost:5000/", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
      })
        .then(async (res) => {
          try {
            let data = await res.json();
            this.products = data.products;
            this.countries = data.countries;
            this.fields = Object.keys(this.products[0]);
            this.fields.push({ key: "Edit", label: "Click & Edit" });
            console.log(this.fields);
          } catch (error) {
            console.log(error);
          }
        })
        .catch((error) => console.log(error));
    },
    setSelectedItem(item) {
      this.selectedItem = item;
    },
  },
  watch: {
    selectedItem: {
      handler(val) {
        console.log(val);
      },
      deep: true,
    },
  },
  created() {
    this.getProducts();
  },
};
</script>

子（弹出组件）

<template>
  <b-modal id="edit-modal">
    <!-- <b-button v-on:click="updateItem">update</b-button> -->
  </b-modal>
</template>

<script>
export default {
  name: "Popup",
  props: {
    selectedItem: Object,
  },
  data() {
    return {
      item: undefined
    };
  },
  watch: {
    selectedItem: {
      handler(val) {
        console.log(val);
      },
      deep: true,
    },
  },
};
</script>

我知道我在这里问了一个很多问题，但没有弄清楚我做错了什么。

Answer 1

您的Popup 组件声明它接收名为selectedItem 的道具。但是您正在使用像<Popup item="selectedItem" /> 这样的弹出窗口，这意味着您将trying to pass a string "selectedItem" 放入一个名为item 的道具中

这就是你想要的：

<Popup :selectedItem="selectedItem" />