uni-app组件间传值

1、父子组件间传值

1.1 使用props进行数据传递（父传子）

1.2 使用$emit发送事件（子传父）

以下是使用props和$emit的示例代码：

父组件：

<template>
  <ChildComponent :parentData="parentData" @childEvent="handleChildEvent" />
</template>
 
<script>
import ChildComponent from '@/components/ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: '父组件数据'
    };
  },
  methods: {
    handleChildEvent(data) {
      console.log('子组件触发的事件', data);
    }
  }
};
</script>

子组件：

<template>
  <view>
    <text>{{ parentData }}</text>
    <button @click="sendDataToParent">向父组件发送数据</button>
  </view>
</template>
 
<script>
export default {
  props: {
    parentData: String
  },
  methods: {
    sendDataToParent() {
      this.$emit('childEvent', '子组件数据');
    }
  }
};
</script>

在这个例子中，父组件通过props向子组件传递数据，子组件通过点击按钮触发一个事件，并通过$emit向父组件发送数据。父组件监听这个事件，并在方法handleChildEvent中处理接收到的数据。

2、通过 URL 参数传递（适用于 WebView）

如果你的 App 页面通过 WebView 渲染，可以像在 Web 端一样通过 URL 传递参数。例如：

uni.navigateTo({
  url: '/pages/targetPage/targetPage?param=value'
});

目标页面可以通过 onLoad 获取参数：

onLoad(options) {
  console.log(options.param); // 获取 URL 中的 param 参数
}

3、通过 Storage 本地存储传递参数

使用 uni.setStorageSync 和 uni.getStorageSync 存储参数，能够在不同页面间传递数据。

// 设置存储
uni.setStorageSync('userInfo', userInfo);

在目标页面获取数据：

const userInfo = uni.getStorageSync('userInfo');
console.log(userInfo);