vue3传参

Vue 3中，组件间传参主要通过props、emits、事件（Event Bus，但在Vue 3中更推荐使用Vuex或Provide/Inject模式替代）、Vuex、Provide/Inject等几种方式实现。以下是几种常见传参方式的简介：

1. Props

Props是父组件向子组件传递数据的方式。在子组件中，你需要定义接受的props，然后在父组件中使用这些定义的props名称将数据传递给子组件。

子组件（ChildComponent.vue）

vue复制代码

	<script setup>
	defineProps({
	title: String,
	age: Number
	});
	</script>
	<template>
	<div>{{ title }} is {{ age }} years old.</div>
	</template>

父组件

vue复制代码

	<template>
	<ChildComponent title="John" age="30" />
	</template>
	<script setup>
	import ChildComponent from './ChildComponent.vue';
	</script>

2. Emits

Emits用于子组件向父组件触发事件，并可以传递数据。在子组件中，你需要使用defineEmits来定义可以触发的事件，然后在需要的时候调用emit方法来触发事件并传递数据。

子组件（ChildComponent.vue）

vue复制代码

	<script setup>
	const emit = defineEmits(['update']);
	function updateParent() {
	emit('update', 'New Data');
	}
	</script>
	<template>
	<button @click="updateParent">Update Parent</button>
	</template>

父组件

vue复制代码

	<template>
	<ChildComponent @update="handleUpdate" />
	</template>
	<script setup>
	import ChildComponent from './ChildComponent.vue';
	function handleUpdate(data) {
	console.log(data); // "New Data"
	}
	</script>

3. Vuex

对于更复杂的状态管理，可以使用Vuex。Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

4. Provide/Inject

Provide/Inject主要用于高级插件/组件库的开发。祖先组件通过provide选项来提供数据，后代组件通过inject选项来接收数据。这种方式在深度嵌套的组件间通信时非常有用。

祖先组件

vue复制代码

	<script setup>
	import { provide } from 'vue';
	provide('theme', 'dark');
	</script>

后代组件

vue复制代码

	<script setup>
	import { inject } from 'vue';
	const theme = inject('theme', 'default'); // 如果没有找到，则返回默认值'default'
	</script>

总结

在Vue 3中，组件间传参主要通过props、emits、Vuex和Provide/Inject等方式实现。根据你的具体需求选择合适的传参方式。对于简单的父子组件通信，props和emits通常是足够的；对于复杂的状态管理，Vuex是更好的选择；而Provide/Inject则适用于跨越多层的组件通信。