数据传递方式总结

数据传递方式总结

2026-02-10开发工具2 阅读

数据传递方式总结

1. 页面间参数传递（UniApp 框架）

1.1 优点

  • 简单直接：通过 URL 拼接参数，实现简单，不需要额外的复杂配置。

  • 兼容性好：是 UniApp 框架原生支持的方式，适用于大多数页面跳转场景。

1.2 缺点

  • 参数长度限制：URL 长度有限制，如果传递的参数过多或参数值过长，可能会导致问题。

  • 数据类型受限：URL 传递的参数都是字符串类型，接收方需要手动进行类型转换。

  • 安全性低：参数直接暴露在 URL 中，敏感信息可能会被泄露。

1.3 适用场景

  • 简单数据传递：传递少量简单的数据，如 ID、名称等。

  • 临时数据传递：在页面跳转时需要临时传递一些数据，这些数据不需要长期保存。

1.4 使用方法示例

发送页面 (Sender.vue)


<template>

  <view>

    <button @click="navigateToReceiver">跳转到接收页面并传递参数</button>

  </view>

</template>



<script setup>

import { ref } from 'vue';

const navigateToReceiver = () => {

  const params = {

    message: '这是传递的参数',

    number: 123

  };

  uni.navigateTo({

    url: `/pages/receiver/Receiver?message=${params.message}&number=${params.number}`

  });

};

</script>
接收页面 (Receiver.vue)

<template>

  <view>

    <text>接收到的消息: {{ message }}</text>

    <text>接收到的数字: {{ number }}</text>

  </view>

</template>



<script setup>

import { ref, onLoad } from 'vue';

const message = ref('');

const number = ref(0);



onLoad((options) => {

  message.value = options.message;

  number.value = Number(options.number);

});

</script>

2. 组件间参数传递（Vue 3）

2.1 优点

  • 数据流向清晰：明确区分父组件向子组件传递数据和子组件向父组件传递事件，使数据流向清晰，便于维护。

  • 类型检查：可以在 props 中定义数据类型，进行类型检查，提高代码的健壮性。

  • 可复用性高：组件可以独立开发和测试，方便在不同的地方复用。

2.2 缺点

  • 多层传递复杂：如果组件嵌套层次较深，需要逐层传递 props，代码会变得复杂和冗余。

  • 不适用于跨组件通信：对于非父子关系的组件，使用 props 和 emits 进行通信会比较困难。

2.3 适用场景

  • 父子组件通信：父组件需要向子组件传递数据，子组件需要向父组件反馈事件或数据。

  • 组件复用：开发可复用的组件，通过 props 控制组件的行为和外观。

2.4 使用方法示例

父组件 (Parent.vue)


<template>

  <view>

    <ChildComponent 

      :parentMessage="parentMessage" 

      @childEvent="handleChildEvent" 

    />

  </view>

</template>



<script setup>

import { ref } from 'vue';

import ChildComponent from '@/components/ChildComponent.vue';



const parentMessage = ref('这是父组件传递的消息');

const handleChildEvent = (data) => {

  console.log('接收到子组件的事件:', data);

};

</script>

**子组件 (ChildComponent.vue)


<template>

  <view>

    <text>{{ parentMessage }}</text>

    <button @click="sendEventToParent">发送事件到父组件</button>

  </view>

</template>



<script setup>

import { defineProps, defineEmits } from 'vue';



const props = defineProps({

  parentMessage: String

});



const emits = defineEmits(['childEvent']);



const sendEventToParent = () => {

  emits('childEvent', '这是子组件传递的数据');

};

</script>

3. 事件通道传递（UniApp）

3.1 优点

  • 数据安全：数据不暴露在 URL 中，相对安全。

  • 支持复杂数据：可以传递任意类型的数据，包括对象、数组等复杂数据结构。

  • 异步通信：支持异步通信，发送方和接收方可以在不同的时间点进行数据交互。

3.2 缺点

  • 使用相对复杂：需要了解事件通道的使用方法，代码量相对较多。

  • 生命周期限制：事件通道依赖于页面的生命周期，页面关闭后事件通道也会失效。

3.3 适用场景

  • 复杂数据传递：需要传递复杂的数据结构，如对象、数组等。

  • 异步数据交互：发送方和接收方需要在不同的时间点进行数据交互。

  • 页面间私密通信：传递敏感信息，不希望数据暴露在 URL 中。

3.4 使用方法示例

发送页面 (Sender.vue)


<template>

  <view>

    <button @click="openNewPage">打开新页面并传递数据</button>

  </view>

</template>



<script setup>

const openNewPage = () => {

  uni.navigateTo({

    url: '/pages/policy/PolicyForm',

    success: (res) => {

      const eventChannel = res.eventChannel;

      eventChannel.emit('policyFormData', {

        mode: 'edit',

        // 其他数据

      });

    }

  });

};

</script>

接收页面 (PolicyForm.vue)


<script setup>

import { ref, onMounted, getCurrentInstance } from 'vue';



const mode = ref('add');



onMounted(() => {

  const instance = getCurrentInstance().proxy

  const eventChannel = instance.getOpenerEventChannel();

  eventChannel.on('policyFormData', (data) => {

    console.log('接收到的参数：', data);

    mode.value = data.mode;

  });

});

</script>

本文由萧兮的博客原创发布，欢迎转载，转载务必保留原文链接。

萧兮的博客：https://www.20010515.xyz · 原文：https://www.20010515.xyz/posts/dd6d8a19-cbeb-47b4-baca-7938aac058f2