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

Question

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

我在父组件中创建了一个将结果推送到数组的方法，然后我将该数组作为道具传递给子组件。

如果我只是在我的子组件中显示该数组，它可以正常工作，但是我要做的是然后根据通过 props 传递的结果在我的子组件中创建一个方法。

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

家长：

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

孩子：

<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

您应该从以父方法作为处理程序的子组件发出自定义事件：

孩子：

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

在父组件中：

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

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