UniAPP开发中常用的七种组件间的传值方法

在Uni App中，有很多组件间传值的方法，通过这些方法可以实现Uni App组件间和页面间的数据传递。根据具体场景选择合适的方法，提高开发效率和代码可维护性。

1）父传子 Props 父组件通过props向子组件传递数据

<!-- 父组件 pages/ParentComponent.vue -->
<template>
  <child-component :message1="parentMessage"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '来自父组件的消息'
    }
  }
}
</script>

<!-- 子组件 pages/ChildComponent.vue -->
<template>
  <view>{{ message1 }}</view>
</template>
<script>
export default {
  props: {
    message1: {
      type: String,
      default: ''
    }
  }
}
</script>

2）子传父 emit 子组件通过emit触发自定义事件，父组件监听该事件并接收数据

<!-- 父组件 pages/ParentComponent.vue -->
<template>
  <child-component @messageFromChild="receiveMessage"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveMessage(message) {
      console.log('收到子组件的消息：', message);
    }
  }
}
</script>

<!-- 子组件 pages/ChildComponent.vue -->
<template>
  <button @click="sendMessageToParent">发送消息给父组件</button>
</template>
<script>
export default {
  methods: {
    sendMessageToParent() {
      this.$emit('messageFromChild', '来自子组件的消息');
    }
  }
}
</script>

3）兄弟组件传值 Event Bus（事件总线） 创建一个全局的事件总线，组件通过$emit触发事件，其他组件通过$on监听事件

<!-- 创建事件总线eventBus.js -->
<script>
import Vue from 'vue';
export const EventBus = new Vue();
</script>

<!-- 组件A发送消息： -->
<script>
import { EventBus } from './eventBus.js';
EventBus.$emit('message', '来自组件A的消息');
</script>

<!-- 组件B接收消息： -->
<script>
import { EventBus } from './eventBus.js';
EventBus.$on('message', (message) => {
  console.log('收到消息：', message);
});
</script>

4）跨层级组件传值 Provide / Inject 祖先组件通过provide提供数据，后代组件通过inject接收数据

<!-- 祖先组件： -->
<script>
export default {
  provide() {
    return {
      message: '来自祖先组件的消息'
    }
  }
}    
</script>

<!-- 后代组件： -->
<script>
export default {
  inject: ['message'],
  mounted() {
    console.log('收到消息：', this.message);
  }
}
</script>

5）跨页面传值 URL参数 通过页面跳转时在URL中添加参数，目标页面通过$route.query获取参数

<!-- 跳转页面： -->
<script>
uni.navigateTo({
  url: '/pages/target?message=来自页面A的消息'
});
</script>

<!-- 目标页面： -->
<script>
export default {
  mounted() {
    console.log('收到消息：', this.$route.query.message);
  }
}
</script>

6）Storage（本地存储） 使用uni.setStorageSync和uni.getStorageSync在本地存储中保存和获取数据

<!-- 页面A保存数据： -->
<script>
uni.setStorageSync('message', '来自页面A的消息');
</script>

<!-- 页面B获取数据： -->
<script>
export default {
  mounted() {
    const message = uni.getStorageSync('message');
    console.log('收到消息：', message);
  }
}
</script>

7）Vuex 使用Vuex管理全局状态，在不同页面和组件中共享数据

<!-- 在Vuex store中定义状态： -->
<script>
const store = new Vuex.Store({
  state: {
    message: '来自Vuex的消息'
  }
});
</script>

<!-- 组件或页面获取状态： -->
<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    }
  }
}
</script>