初探vue与uni-app递归组件排坑，远离数据传递阻碍！

前端

2023-03-02 12:21:47

Vue递归组件中的Emit失效问题

在Vue应用程序中，递归组件因其简洁的语法和强大的功能而备受青睐。然而，当您尝试使用emit方法向父组件传递数据时，您可能会遇到一个恼人的问题：Emit失效 。

原因：组件层次结构

这种失效的根本原因在于Vue递归组件的层次结构。当子组件使用emit方法时，数据必须一层一层地向上传递。但emit方法本身缺乏穿透性，无法跨越组件层级。因此，数据通常会在中间环节被拦截，导致父组件无法接收来自子组件的数据。

解决方案策略

为了解决Vue递归组件中emit失效的问题，开发人员提出了多种解决方案。这些解决方案虽然因框架而异，但其目标都是突破组件层级限制，实现数据顺畅传递。

Vue 2：中介组件

在Vue 2中，您可以引入一个中介组件 作为数据中转站。此组件负责接收子组件的数据，并将其传递给父组件。这种方法比较简单，但需要在组件树中添加额外的组件，这会增加代码复杂性。

Vue 3：自定义事件总线

Vue 3中，您可以利用自定义事件总线 实现组件间的数据传递。自定义事件总线是一种全局性的事件通信机制，允许组件在不直接关联的情况下进行通信。通过发布订阅模式，组件可以向总线发送事件，其他组件可以订阅这些事件并做出相应反应。

Uni-app：Props和Watch

在Uni-app中，您可以使用Props和Watch 来实现组件间的数据传递。Props是子组件从父组件接收数据的桥梁，Watch是组件监听属性值变化的钩子函数。通过Props和Watch的结合，您可以让子组件监听父组件传递过来的数据，并在数据变化时做出相应的反应。

代码示例：

Vue 2 中介组件

// 中介组件
<template>
  <div>
    <ChildComponent @emitData="onEmitData" />
  </div>
</template>

<script>
export default {
  methods: {
    onEmitData(data) {
      this.$emit('emitData', data);
    }
  }
};
</script>

Vue 3 自定义事件总线

// 创建事件总线
const eventBus = new Vue();

// 在子组件中发布事件
this.$emit('emitData', data);

// 在父组件中订阅事件
eventBus.$on('emitData', (data) => {
  console.log(data);
});

Uni-app Props和Watch

// 父组件
<template>
  <view>
    <ChildComponent :data="data" @emitData="onEmitData" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      data: '示例数据'
    }
  },
  methods: {
    onEmitData(data) {
      console.log(data);
    }
  }
};
</script>

// 子组件
<template>
  <view>{{ data }}</view>
</template>

<script>
export default {
  props: ['data'],
  watch: {
    data(newVal, oldVal) {
      console.log(newVal);
    }
  }
};
</script>