如何实现传值vue

传值方法一：Props（父组件向子组件传值）

在父组件中通过属性绑定传递数据，子组件通过props接收。

父组件代码：

<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  }
};
</script>

子组件代码：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message'] // 或使用对象形式定义类型校验
};
</script>

传值方法二：自定义事件（子组件向父组件传值）

子组件通过$emit触发事件，父组件通过v-on监听事件并接收数据。

子组件代码：

<template>
  <button @click="sendData">Send Data</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('update-data', 'Data from Child');
    }
  }
};
</script>

父组件代码：

<template>
  <ChildComponent @update-data="handleData" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  methods: {
    handleData(data) {
      console.log(data); // 输出: "Data from Child"
    }
  }
};
</script>

传值方法三：Vuex（跨组件状态管理）

适用于复杂应用中的全局状态共享。

Store定义示例：

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

export default new Vuex.Store({
  state: {
    sharedValue: 'Global Data'
  },
  mutations: {
    setValue(state, payload) {
      state.sharedValue = payload;
    }
  }
});

组件中使用：

<template>
  <div>{{ sharedValue }}</div>
  <button @click="updateValue">Update</button>
</template>

<script>
export default {
  computed: {
    sharedValue() {
      return this.$store.state.sharedValue;
    }
  },
  methods: {
    updateValue() {
      this.$store.commit('setValue', 'New Value');
    }
  }
};
</script>

传值方法四：Event Bus（非父子组件通信）

通过全局事件总线实现任意组件间通信。

初始化Event Bus：

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

发送事件组件：

import { EventBus } from './eventBus.js';
EventBus.$emit('custom-event', 'Some Data');

接收事件组件：

import { EventBus } from './eventBus.js';
EventBus.$on('custom-event', data => {
  console.log(data); // 输出: "Some Data"
});

传值方法五：provide/inject（祖先组件向后代传值）

适用于深层嵌套组件，避免逐层传递props。

祖先组件：

<script>
export default {
  provide() {
    return {
      providedValue: 'Injected Data'
    };
  }
};
</script>

后代组件：

<script>
export default {
  inject: ['providedValue'],
  mounted() {
    console.log(this.providedValue); // 输出: "Injected Data"
  }
};
</script>