时间戳

首页 > 解决方案 > 将对象从子组件（在插槽中）传递到 Vue 3 中的父组件

vuejs3 - 将对象从子组件（在插槽中）传递到 Vue 3 中的父组件

问题描述

我正在尝试为能够使用单例的 Tippy JS 实现一个包装器组件。为此，我需要从子元素（包含在包装器的插槽中）发出/收集tippy 实例，并从中创建一个单例。

我见过多个关于使用事件总线（例如 mitt）来传递数据的线程。我预见的问题是，当子级发出事件时，父级还没有准备好处理事件，而且我不确定如何干净地链接所有可能的 wrapper-child 组。

注意：我知道 Scoped Slot 模式，但我需要在代码中使用数据（准确地说是在挂载的钩子中），所以我认为这不是一个可行的解决方案。

标签： vuejs3vue-slot

解决方案

我找到了一种不使用事件将数据从子组件（插槽中的组件）发送到父组件（托管插槽的组件）的方法（以避免在父组件准备好收听并保留所有组件脚本部分中的逻辑）。

诀窍是使用$parent可以访问父方法的属性。通过向父级添加一个saveData方法并在需要时从子级执行它，可以直接通信数据。

例子：

// child component
export default {
  name: 'child',
  mounted() {
    // check if the method is available in the parent
    if (this.$parent.saveData) {
      this.$parent.saveData('the data to save');
    }
  }
}

// parent component
export default {
  name: 'parent',
  methods: {
    saveData(data) {
      // save or process the data as you need
    }
  }
}

推荐阅读