uniapp组件如何实现数据共享

在 UniApp 中，组件之间的数据共享可以通过以下几种方式实现：

1. Props 和 Events：这是父子组件之间通信的基础。父组件通过 props 向子组件传递数据，子组件通过事件向父组件发送消息。

<!-- 父组件 -->
<template>
  <ChildComponent :parentData="data" @childEvent="handleChildEvent" />
</template>

<script>
export default {
  data() {
    return {
      data: 'Shared Data'
    };
  },
  methods: {
    handleChildEvent(value) {
      console.log('Data received from child:', value);
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="sendToParent">Send to Parent</button>
</template>

<script>
export default {
  props: ['parentData'],
  methods: {
    sendToParent() {
      this.$emit('childEvent', 'Data from child');
    }
  }
};
</script>

2. Vuex：对于复杂的应用，可以使用 Vuex 来管理状态。Vuex 是 Vue.js 的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    sharedData: 'Initial Shared Data'
  },
  mutations: {
    updateSharedData(state, payload) {
      state.sharedData = payload;
    }
  },
  actions: {
    changeSharedData({ commit }, payload) {
      commit('updateSharedData', payload);
    }
  }
});

<!-- 在任何组件中 -->
<template>
  <div>{{ sharedData }}</div>
</template>

<script>
export default {
  computed: {
    sharedData() {
      return this.$store.state.sharedData;
    }
  },
  methods: {
    updateSharedData() {
      this.$store.dispatch('changeSharedData', 'New Shared Data');
    }
  }
};
</script>

3. Provide / Inject：这是一种高级的依赖注入机制，允许祖先组件向其所有子孙后代注入一个依赖，而不需要显式地通过每个层级传递 props。

<!-- 祖先组件 -->
<script>
export default {
  provide() {
    return {
      sharedData: this.sharedData
    };
  },
  data() {
    return {
      sharedData: 'Shared Data'
    };
  }
};
</script>

<!-- 后代组件 -->
<script>
export default {
  inject: ['sharedData'],
  mounted() {
    console.log(this.sharedData); // 'Shared Data'
  }
};
</script>

4. 全局事件总线：创建一个全局的 Vue 实例作为中央事件总线，任何组件都可以使用它来触发和监听事件。

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

<!-- 组件 A -->
<script>
import { EventBus } from './eventBus.js';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('custom-event', 'Hello from Component A');
    }
  }
};
</script>

<!-- 组件 B -->
<script>
import { EventBus } from './eventBus.js';

export default {
  created() {
    EventBus.$on('custom-event', this.handleCustomEvent);
  },
  methods: {
    handleCustomEvent(message) {
      console.log(message); // 'Hello from Component A'
    }
  },
  beforeDestroy() {
    EventBus.$off('custom-event', this.handleCustomEvent);
  }
};
</script>

选择哪种方法取决于你的应用结构和需求。对于简单的父子组件通信，props 和 events 就足够了。对于更复杂的全局状态管理，Vuex 是更好的选择。Provide / Inject 适用于深层次的组件通信，而全局事件总线则适用于任何组件间的通信，但可能会导致难以追踪的事件流。