uniapp兄弟组件传参

在UniApp中，兄弟组件之间的参数传递可以通过事件和全局数据来实现。下面是两种常用的方法：

1. 使用事件总线：
- 在兄弟组件的共同父组件中创建一个事件总线（可以是Vue实例或者UniApp插件）。
- 在发送数据的组件中使用`$emit`触发一个自定义事件，并传递需要传递的参数。
- 在接收数据的组件中使用`$on`监听该自定义事件，并获取传递的参数。

2. 使用全局数据：
- 在`App.vue`或者其他根组件中定义一个全局数据对象，如`globalData`。
- 在发送数据的组件中通过`this.$parent.globalData`或者`this.$root.globalData`来访问全局数据对象，并将需要传递的参数赋值给对应的属性。
- 在接收数据的组件中同样通过`this.$parent.globalData`或者`this.$root.globalData`来访问全局数据对象，并获取传递的参数。

这两种方法都可以实现兄弟组件之间的参数传递，根据具体情况选择使用。

相关问题

uniapp父子组件传参

在uniapp中，父组件向子组件传递参数可以通过props属性来实现。具体步骤如下：

1. 在子组件中定义props属性，用于接收父组件传递的参数：

export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  // ...
}

2. 在父组件中引用子组件时，通过v-bind指令向子组件传递参数：

<template>
  <child-component :message="hello"></child-component>
</template>

其中，hello是父组件中的一个变量或者表达式，通过v-bind指令绑定到子组件的message属性上。

3. 子组件中可以通过this.message来获取父组件传递的参数。例如：

export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  // ...
  mounted() {
    console.log(this.message); // 输出：hello world
  }
}

通过以上步骤，就可以实现uniapp父子组件之间的参数传递了。

uniapp 子组件传参到父组件

在UniApp中，子组件向父组件传递数据通常通过事件（Event Bus）或者props的方式进行。以下是两种常见的做法：

**1. 通过Props传递（父子组件间直接通信）：**
如果你需要从父组件到子组件传递数据，可以在子组件的`props`中声明接收的数据属性，然后在父组件上调用子组件并传入所需值。

<!-- 父组件.vue -->
<template>
  <child-component :data="parentData" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: '这是父组件的数据'
    }
  }
}
</script>

<!-- 子组件.vue -->
<template>
  <button @click="handleClick">点击获取数据</button>
</template>

<script>
export default {
  props: {
    data: String // 接收的数据类型
  },
  methods: {
    handleClick() {
      console.log(this.data);
    }
  }
}
</script>

**2. 通过Event自定义事件（非父子组件间的通信）：**
如果需要跨级通信，可以使用 UniApp 提供的Event模块，在子组件触发事件，然后在父组件监听这个事件来接收。

<!-- 子组件.vue -->
<template>
  <button @click="emitData">触发数据传递</button>
</template>

<script>
export default {
  methods: {
    emitData() {
      this.$emit('parentData', '这是一条来自子组件的数据');
    }
  }
}
</script>

<!-- 父组件.vue -->
<template>
  <ChildComponent @parentData="handleParentData" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleParentData(data) {
      console.log('父组件接收到:', data);
    }
  }
}
</script>