时间戳

首页 > 解决方案 > 您如何仅使用来自没有事件的子函数调用来更新父数据 - Vue？

javascript - 您如何仅使用来自没有事件的子函数调用来更新父数据 - Vue？

问题描述

我有一个父组件和一个子组件。我想将数据从孩子传递给父母。如果在子组件中调用了一个函数，有没有办法更新子组件中的数据并将其传递给父组件？

在线查看，大多数示例涉及单击子组件中的按钮然后发送给父组件。但就我而言，只有在调用函数时才没有单击按钮事件。

我们将如何做到这一点？谢谢

标签： javascriptvue.jsvuejs2vue-componentparent-child

解决方案

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

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（或@EVENT_NAME用于简写）来接收孩子的数据：

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

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

演示

推荐阅读