uniapp项目实现传值

在uniapp项目中，你可以使用多种方式进行父子组件间的传值。以下是几种常见的方法：

**1. Props（属性传递）：**
这是最常见的方式，适用于从父组件向子组件传递数据。父组件通过`props`属性将数据绑定到子组件的`props`上。

// 父组件
<template>
  <child-component :message="parentMessage" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: "Hello, child!",
    };
  },
};
</script>

// 子组件
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String, // 定义接收到的prop数据类型
  },
};
</script>

**2. Events（事件总线/自定义事件）：**
如果需要在兄弟组件之间共享数据，可以使用事件总线（uni-app提供vuex作为状态管理工具，也可以自建事件中心）。父组件触发事件，子组件监听该事件接收数据。

// 父组件
<template>
  <button @click="emitData">触发数据</button>
</template>

<script>
export default {
  methods: {
    emitData() {
      this.$bus.$emit('传递数据', 'From Parent');
    },
  },
};
</script>

// 子组件
<template>
  <button @click="$refs.child.receiveData">接收数据</button>
</template>

<script>
import bus from '@/common/bus'; // 引入事件总线

export default {
  ref: 'child',
  mounted() {
    bus.on('传递数据', data => {
      this.receiveData(data);
    });
  },
  methods: {
    receiveData(data) {
      console.log(`Received data: ${data}`);
    },
  },
};
</script>

**3. State Management（Vuex）：**
对于更复杂的场景，可以使用状态管理库Vuex来管理全局或应用内的共享状态。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

const state = {
  sharedData: '',
};

const mutations = {
  setData(state, newData) {
    state.sharedData = newData;
  },
};

export default new Vuex.Store({
  state,
  mutations,
});

// 使用
import store from '@/store';
...
methods: {
  sendData() {
    store.commit('setData', 'From Parent');
  },
},
...
mounted() {
  this.$store.subscribe((mutation, state) => {
    if (mutation.type === 'SET_DATA') {
      console.log(`Received data: ${state.sharedData}`);
    }
  });
}