当前位置：首页 > news >正文

UniApp组件传参方式

news 2025/8/28 5:23:50

在 UniApp 中，组件传参（通信）是开发中的核心需求。以下是 8 种常用的组件传参方式，根据场景灵活选择：

一、父组件 → 子组件：`Props` (最常用)

<!-- 父组件 -->
<child-component :title="parentTitle"></child-component><!-- 子组件 -->
<script>
export default {props: {title: {type: String,default: "默认标题"}},mounted() {console.log(this.title); // 接收父组件值}
}
</script>

二、子组件 → 父组件：`$emit` (自定义事件)

<!-- 子组件 -->
<button @click="sendData">传递数据</button>
<script>
export default {methods: {sendData() {this.$emit('child-event', { data: "来自子组件的数据" });}}
}
</script><!-- 父组件 -->
<child-component @child-event="handleChildData"></child-component>
<script>
export default {methods: {handleChildData(payload) {console.log(payload.data); // 接收子组件数据}}
}
</script>

三、兄弟组件通信：全局事件总线（Event Bus）

// utils/eventBus.js
import Vue from 'vue';
export default new Vue();// 组件A (发送)
import eventBus from '@/utils/eventBus';
eventBus.$emit('update-data', { key: 'value' });// 组件B (接收)
import eventBus from '@/utils/eventBus';
eventBus.$on('update-data', payload => {console.log(payload.key); // 'value'
});

注意：在组件销毁前移除监听：beforeDestroy() { eventBus.$off('update-data') }

四、跨级组件通信：`provide/inject`

<!-- 祖先组件 -->
<script>
export default {provide() {return {appData: "全局数据"}}
}
</script><!-- 后代组件 (任意层级) -->
<script>
export default {inject: ['appData'],mounted() {console.log(this.appData); // "全局数据"}
}
</script>

五、Vuex 状态管理 (复杂场景)

// store/index.js
export default new Vuex.Store({state: { count: 0 },mutations: {increment(state, payload) {state.count += payload.value;}}
});// 组件A (修改)
this.$store.commit('increment', { value: 5 });// 组件B (获取)
computed: {count() {return this.$store.state.count;}
}

六、父直接访问子：`$refs`

<!-- 父组件 -->
<child-component ref="childRef"></child-component>
<button @click="callChildMethod">调用子组件方法</button><script>
export default {methods: {callChildMethod() {this.$refs.childRef.childMethod(); // 直接调用子组件方法console.log(this.$refs.childRef.data); // 访问子组件数据}}
}
</script>

七、全局变量：`uni.$emit` 和 `uni.$on` (页面间通信)

// PageA 发送数据
uni.$emit('globalEvent', { msg: "跨页面数据" });// PageB 接收数据
uni.$on('globalEvent', data => {console.log(data.msg); // "跨页面数据"
});// 注意：使用 uni.$off 移除监听

八、本地存储：`uni.setStorageSync` (持久化数据)

// 存储数据
uni.setStorageSync('key', JSON.stringify({ user: "Alice" }));// 读取数据
const data = JSON.parse(uni.getStorageSync('key'));
console.log(data.user); // "Alice"