我尝试在点击【确认取消】按钮时，触发一个方法，改变currentStatus变量的文本内容。此按钮位于对话框内的子组件中，而方法应位于父组件中。所以我尝试将此方法作为props传递给子组件。在编写如下代码后，我在控制台中得到错误“this.cancelOrderFunction不是函数”。我知道这是一个微小的错误，但无法找到它。我尝试用下面的代码解决这个错误。
changeStatus.vue（父组件）
<template>
<cancelOrder :cancelOrderFunction="cancelOrderFunction"></cancelOrder>
</template>
<script>
import cancelOrder from "../components/cancelOrder.vue"; /*importing child component*/
export default {
data: () => ({
currentStatus: "ACTIVE",
}),
methods: {
cancelOrderFunction() {
this.currentStatus = "CANCELLED";
},
},
components: {
cancelOrder,
},
};
</script>字符串
cancelOrder.vue（子组件）
<template>
<v-btn @click="confirmCancelOrder">Confirm Cancel</v-btn>
</template>
<script>
export default {
props: ["cancelOrderFunction"],
methods: {
confirmCancelOrder() {
this.cancelOrderFunction();
},
},
};
</script>型
cancelOrder.vue组件由一个按钮取消订单组成，该按钮进一步打开一个对话框。该对话框由确认取消按钮组成，点击该按钮后，对话框关闭，同时触发cancelOrderFunction。在我的例子中，对话框始终关闭，但由于上述错误，方法没有被调用。
1条答案
按热度按时间06odsfpq1#
变量只能传递给子变量。如果你想从父级中的子级调用一个函数，你应该使用“emit”。
https://vuejs.org/guide/components/events.html#emitting-and-listening-to-events
将其绑定为v模型也是一个好主意。因为它将值和发射值绑定为一个。这一切都取决于案件。
下面是你应该如何使用emit的解决方案。告诉我你是不是这个意思。
changeStatus.vue（父组件）
字符串
cancelOrder.vue（子组件）
型