uni-app 同一个页面使用两次同一个自定义组件 第一个组件会被第二个组件的操作影响

在 uni-app 中，如果你在同一个页面中使用了两次同一个自定义组件，并且发现第一个组件的操作会影响第二个组件，这通常是因为组件的状态或数据没有正确地隔离。以下是一些可能的原因和解决方案：

1. 组件状态未隔离

如果你在组件内部使用了全局状态或共享数据，可能会导致两个组件之间的状态相互影响。

解决方案：

• 确保每个组件实例都有自己的独立状态。可以使用 data 函数来返回一个独立的状态对象。
• 避免在组件内部直接修改全局状态或父组件传递的 props。

export default {
  data() {
    return {
      // 每个组件实例都有自己的独立状态
      localState: 'initial value'
    };
  }
};

2. props 传递问题

如果你通过 props 传递了相同的引用类型数据（如对象或数组），并且在一个组件中修改了这些数据，另一个组件也会受到影响。

解决方案：

• 在父组件中为每个子组件传递不同的数据副本，而不是共享同一个引用。
• 在子组件内部对 props 进行深拷贝，以避免直接修改父组件传递的数据。

export default {
  props: {
    sharedData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 对 props 进行深拷贝
      localData: JSON.parse(JSON.stringify(this.sharedData))
    };
  }
};

3. 事件冒泡或全局事件

如果你在组件中使用了全局事件或事件冒泡，可能会导致一个组件的事件影响到另一个组件。

解决方案：

• 确保事件处理是局部的，避免使用全局事件。
• 使用 $emit 来触发父组件的事件，而不是直接操作其他组件。

export default {
  methods: {
    handleClick() {
      // 触发父组件的事件
      this.$emit('custom-event', 'some data');
    }
  }
};

4. ref 引用问题

如果你在父组件中通过 ref 引用了子组件，并且两个子组件使用了相同的 ref 名称，可能会导致引用冲突。

解决方案：

• 为每个子组件使用不同的 ref 名称。

<template>
  <div>
    <custom-component ref="component1"></custom-component>
    <custom-component ref="component2"></custom-component>
  </div>
</template>

5. CSS 样式冲突

如果两个组件的样式没有正确隔离，可能会导致样式冲突。

解决方案：

• 使用 scoped 样式来确保样式只在当前组件内生效。

<style scoped>
.custom-class {
  /* 样式只在该组件内生效 */
}
</style>

6. 生命周期钩子问题

如果你在生命周期钩子中执行了某些全局操作，可能会导致两个组件相互影响。

解决方案：

• 确保生命周期钩子中的操作是局部的，不会影响到其他组件。

export default {
  mounted() {
    // 确保这里的操作不会影响到其他组件
    this.localState = 'mounted';
  }
};