Question

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

我已经看到多个线程使用事件总线（例如手套）来传递数据。我预见的问题是，当孩子们发出它们时，父级将不会准备好处理事件，而且我不确定如何干净地链接所有可能的包装子组。

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

Answer 1

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

诀窍是使用 $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
    }
  }
}

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

1 个答案: