如何使用传递给 child 组件的道具创建方法（Vue3）

Question

我在开始项目的最后一部分努力将结果输出到它自己的组件。

我在 parent 组件中创建了一个方法来将结果推送到一个数组，然后我将该数组作为 props 传递给 child 组件。

如果我只是在我的 child 组件中显示数组，它工作正常，但是我想做的是根据通过道具.

当我尝试执行此操作时，我没有得到任何输出，这是您可以在 Vue 中执行的操作吗？

Parent:

<template>
  <button @click="decreaseCount">Decrease</button>
  <button @click="increaseCount">Increase</button>
  <div class="counterDiv">Counter: {{ count }}</div>
  <button @click="calculateResults">Submit</button>
  <results v-if="resultsVisible" :results="results"></results>
</template>

<script>
import Results from "./components/Results.vue";
export default {
  name: "App",
  components: {
    Results,
  },
  data() {
    return {
      count: 0,
      results: [],
      resultsVisible: false,
    };
  },
  methods: {
    increaseCount() {
      this.count += 1;
    },
    decreaseCount() {
      this.count -= 1;
    },
    calculateResults() {
      this.results.push(this.count);
      this.resultsVisible = true;
    },
  },
};
</script>

Child:

<template>
  <div class="finalResults">Results: {{ this.resultsText }}</div>
</template>

<script>
export default {
  props: ["results"],
  data() {
    return {
      resultsText: "",
    };
  },
  methods: {
    returnText() {
      if (results < 10) {
        this.resultsText = "Below 10";
      }
    },
  },
};
</script>

我在下面创建了一个非常基本的问题示例

Answer 1

您应该从 child 组件发出自定义事件，该组件具有 parent 方法作为处理程序：

child :

<template>
  <div class="finalResults">Results: {{ this.resultsText }}</div>
</template>

<script>
export default {
  props: ["results"],
  data() {
    return {
      resultsText: "",
    };
  },
  methods: {
    returnText() {
      if (this.results < 10) {
        this.resultsText = "Below 10";
      this.$emit('push-item', this.resultsText )
      }
    },
  },
};
</script>

在 parent 组件中：

<results v-if="resultsVisible" :results="results" @push-item="pushResult"></results>

...
methods:{
  pushResult(resulttext){...}
....
}

如何使用传递给 child 组件的道具创建方法（Vue3）

How to create a method with props passed to child component (Vue3)

vue.js

vuejs3