vue组件返回值

【问题标题】：Vue component return valuevue组件返回值
【发布时间】：2021-01-12 13:21:31
【问题描述】：

我是 VUE 新手，正在尝试通过创建组件而不是重复代码来清理我的代码。

如何将 varform 返回子组件？

Main.vue

<template>
     <square value="5" @click="result"></square>
</template>

Square.vue

[...]
mounted() {
     return { fromSquare: value*value } 
}

Main.vue

methods: {
   result(fromSquare) {
       this.squaredResult = fromSquare;
   }

}

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

您必须从square 组件发出一个事件，并以value*value 作为有效负载，并将其处理程序添加到父组件中：

mounted() {
    this.$emit("emit-result",value*value)
}

Main.vue

<template>
     <square value="5" @click="result" @emit-result="result"></square>
</template>

....

methods: {
   result(fromSquare) {
       this.squaredResult = fromSquare;
   }

}

【讨论】：