uniapp组件如何使用如何传值

在UniApp中，组件之间的传值可以通过props属性实现，这是一种父子组件间的通信方式。以下是两种常见的传值方法：

**方法一：Vue2风格（父向子传值）**
如果你使用的是uniapp-vue2的写法，可以这样在父组件发送消息到子组件：

// 父组件（Parent.vue）
<template>
  <my-child @messageReceived="handleMessage"></my-child>
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log('Received message from child:', message);
    }
  }
}
</script>

**方法二：uniapp原生方式（双向数据绑定）**
在uniapp中，如果直接在模板中使用`<my-component>`标签，你可以通过`props`来接收和传递数据：

**子组件（ChildComponent.wxml）**

<!-- ChildComponent.wxml -->
<view class="content">
  <image :src="logoSrc" />
  <text class="title">{{ title }}</text>
</view>

**子组件（ChildComponent.js）**

// ChildComponent.js
export default {
  properties: {
    logoSrc: { type: String }, // 接收图片路径
    title: { type: String }  // 接收文本内容
  },
  data() {
    return {
      logoSrc: '/static/logo.png', // 默认值
      title: '默认标题'
    };
  }
};

**父组件调用子组件并传值（Parent.vue）**

<template>
  <my-component logo-src="newLogo.png" title="New Title"></my-component>
</template>

当父组件的数据发生变化时，子组件会自动更新，反之亦然。