vue.js - vue组件返回值

Question

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

你如何返回一个 varform 一个子组件？

主.vue

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

Square.vue

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

主.vue

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

}

标签： vue.jsvue-component

Answer 1

您必须从square具有有效负载的组件发出一个事件value*value，并将其处理程序添加到 parent ：

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

主.vue

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

....

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

}