博客站

在 UniApp 中，组件通信是实现复杂应用功能的关键。UniApp 基于 Vue.js，因此可以使用 Vue.js 的组件通信机制。以下是 UniApp 中实现组件通信的常用方法：

一、父子组件通信

1. 父组件向子组件传递数据（Props）

• 父组件通过 props 向子组件传递数据。
• 示例：

  <!-- 父组件 -->
  <template>
    <view>
      <child-component :message="parentMessage"></child-component>
    </view>
  </template>
  
  <script>
  import ChildComponent from '@/components/ChildComponent.vue';
  export default {
    components: { ChildComponent },
    data() {
      return {
        parentMessage: 'Hello from Parent'
      };
    }
  };
  </script>
  
  <!-- 子组件 -->
  <template>
    <view>
      <text>{{ message }}</text>
    </view>
  </template>
  
  <script>
  export default {
    props: ['message']
  };
  </script>
  

2. 子组件向父组件传递数据（自定义事件）

• 子组件通过 $emit 触发自定义事件，父组件监听事件并处理数据。
• 示例：

  <!-- 子组件 -->
  <template>
    <view>
      <button @click="sendMessage">发送消息</button>
    </view>
  </template>
  
  <script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('message', 'Hello from Child');
      }
    }
  };
  </script>
  
  <!-- 父组件 -->
  <template>
    <view>
      <child-component @message="handleMessage"></child-component>
    </view>
  </template>
  
  <script>
  import ChildComponent from '@/components/ChildComponent.vue';
  export default {
    components: { ChildComponent },
    methods: {
      handleMessage(message) {
        console.log('收到子组件的消息：', message);
      }
    }
  };
  </script>
  

二、兄弟组件通信

1. 通过父组件中转

• 兄弟组件可以通过共同的父组件进行通信。
• 示例：

  <!-- 父组件 -->
  <template>
    <view>
      <child-a @message="handleMessage"></child-a>
      <child-b :message="message"></child-b>
    </view>
  </template>
  
  <script>
  import ChildA from '@/components/ChildA.vue';
  import ChildB from '@/components/ChildB.vue';
  export default {
    components: { ChildA, ChildB },
    data() {
      return {
        message: ''
      };
    },
    methods: {
      handleMessage(message) {
        this.message = message;
      }
    }
  };
  </script>
  
  <!-- ChildA -->
  <template>
    <view>
      <button @click="sendMessage">发送消息</button>
    </view>
  </template>
  
  <script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('message', 'Hello from ChildA');
      }
    }
  };
  </script>
  
  <!-- ChildB -->
  <template>
    <view>
      <text>{{ message }}</text>
    </view>
  </template>
  
  <script>
  export default {
    props: ['message']
  };
  </script>
  

2. 使用全局事件总线

• 创建一个全局事件总线，兄弟组件通过事件总线通信。
• 示例：

  // eventBus.js
  import Vue from 'vue';
  export const EventBus = new Vue();
  
  // ChildA
  <script>
  import { EventBus } from '@/eventBus.js';
  export default {
    methods: {
      sendMessage() {
        EventBus.$emit('message', 'Hello from ChildA');
      }
    }
  };
  </script>
  
  // ChildB
  <script>
  import { EventBus } from '@/eventBus.js';
  export default {
    data() {
      return {
        message: ''
      };
    },
    created() {
      EventBus.$on('message', (message) => {
        this.message = message;
      });
    }
  };
  </script>
  

三、跨层级组件通信

1. 使用 Vuex 状态管理

• Vuex 是 Vue.js 的官方状态管理工具，适合跨层级组件通信。
• 示例：

  // store.js
  import Vue from 'vue';
  import Vuex from 'vuex';
  Vue.use(Vuex);
  
  const store = new Vuex.Store({
    state: {
      message: ''
    },
    mutations: {
      setMessage(state, message) {
        state.message = message;
      }
    }
  });
  
  export default store;
  
  // 组件 A
  <script>
  export default {
    methods: {
      sendMessage() {
        this.$store.commit('setMessage', 'Hello from Component A');
      }
    }
  };
  </script>
  
  // 组件 B
  <template>
    <view>
      <text>{{ message }}</text>
    </view>
  </template>
  
  <script>
  export default {
    computed: {
      message() {
        return this.$store.state.message;
      }
    }
  };
  </script>
  

2. 使用 provide 和 inject

• 父组件通过 provide 提供数据，子孙组件通过 inject 注入数据。
• 示例：

  <!-- 父组件 -->
  <template>
    <view>
      <child-component></child-component>
    </view>
  </template>
  
  <script>
  export default {
    provide() {
      return {
        message: 'Hello from Parent'
      };
    }
  };
  </script>
  
  <!-- 子组件 -->
  <template>
    <view>
      <text>{{ message }}</text>
    </view>
  </template>
  
  <script>
  export default {
    inject: ['message']
  };
  </script>
  

四、总结

UniApp 提供了多种组件通信方式，开发者可以根据需求选择合适的方法：

1. 父子组件通信：使用 props 和 $emit。
2. 兄弟组件通信：通过父组件中转或使用全局事件总线。
3. 跨层级组件通信：使用 Vuex 或 provide/inject。

以下是一个完整的 Vuex 示例：

1. store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    }
  }
});

export default store;

2. main.js

import Vue from 'vue';
import App from './App';
import store from './store';

const app = new Vue({
  store,
  ...App
});
app.$mount();

3. 组件 A

<template>
  <view>
    <button @click="sendMessage">发送消息</button>
  </view>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$store.commit('setMessage', 'Hello from Component A');
    }
  }
};
</script>

4. 组件 B

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    }
  }
};
</script>

通过合理使用这些方法，可以实现 UniApp 中各种复杂的组件通信需求。