如何仅使用来自 child 的函数调用更新 Parent 数据而没有事件 - Vue？

Question

我有一个 parent 和一个 child 组件。我想将数据从 child 传递到 parent。如果在 child 组件中调用一个函数，有没有办法将 child 组件中的数据更新并传递给 parent 组件？

在线查看，大多数示例都涉及单击 child 组件中的按钮，然后发送到 parent。但在我的例子中，没有点击按钮事件，只有在调用函数时才会发生。

我们该怎么做？谢谢

Answer 1

听起来您只是想避免事件，因为您假设事件必须来自按钮单击，但事实并非如此。例如，事件可以是超时后调用的函数。对于直接子级到父级的数据通信，事件通常用于从子级向上传递数据。

vm.$emit() 可用于子级向父级传递数据：

// Child.vue
export default {
  mounted() {
    // aritifical delay
    setTimeout(() => this.emitDataToParent({ foo: true }), 1000)
  },
  methods: {
    emitDataToParent(data) {
      this.$emit('my-event', data)
    }
  }
}

父组件可以通过v-on:EVENT_NAME添加一个事件处理器（或者shorthand使用@EVENT_NAME）来接收子组件的数据：

<template>
  <Child @my-event="handleMyEvent" />
</template>

<script>
export default {
  methods: {
    handleMyEvent(data) {
      console.log(data)
    }
  }
}
</script>

demo

如何仅使用来自 child 的函数调用更新 Parent 数据而没有事件 - Vue？

How do you update a Parent data with only function calls from the child with no event - Vue?

javascript

vue.js

vuejs2

vue-component

parent-child