vue组件间传值最全总结

vue组件间传值最全总结

1. props 父传子

使用props传递数据,父组件通过props属性传递数据到子组件.

• 优点：
  易于理解，符合单向数据流的原则，有利于代码维护。

• 缺点：
  数据只能从父组件传递到子组件，不能反向传递。如果需要多个层级传递，则需要逐层向下传递props。
  当应用规模扩大时，过度依赖props可能导致组件间耦合度提高。

<!--父组件-->
<template>
	<ChildComponent :parentData="data">
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export deault {
	components:{
		ChildComponent
	},
	data(){
		return {
			data: 'some data'
		}
	}
}
</script>

<!--子组件-->
<template>
<div> {{ parentData }} </div>
</template>

<script>
	export default {
		data(){
			return {
				props:['parentData']
			}
		}
	}
</script>

2.$emit 发射事件 - 子传父

使用$emit发射事件:子组件可以通过事件的方式传递数据给父组件.(子传父,事件的方式)

• 优点：
  实现了数据从子组件向父组件的传递，遵循响应式设计原则。

• 缺点：
  只能实现相邻组件之间的通信，对于多层级嵌套组件间的通信较为复杂。
  如果组件间交互复杂，可能会导致大量自定义事件的使用，影响代码可读性和可维护性。

<!-- 子组件 -->
<template>
<button @click="sendDataToParent"> send Data </button>
</template>

<script>
	export default {
		methods: {
			sendDataToParent() {
				this.$emit('dataToParent','some data')
			}
		}
	}
</script>

<!-- 父组件 -->
<template>
<ChildComponent @dataToParent="receiveDataFromChild">
</template>

<script>
	export default {
		components:{
			ChildComponent
		},
		methods:{
			receiveDataFromChild(){
				console.log(data); // 'some data'
			}
		}
	}
</script>

3. Vuex 状态管理

使用Vuex管理状态: Vuex是一个专门为Vue.js应用程序开发的状态管理模式.

• 优点：

提供了一个中心化的状态管理机制，便于多个组件共享和管理状态。
支持异步操作，适合大型项目，可以有效降低组件间的耦合度。

• 缺点：

对小型项目来说，引入Vuex可能过于复杂，增加了项目的开发和学习成本。
需要编写额外的store模块和actions/mutations/getters，增加了一定的代码量。

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

Vue.use(Vuex);

export default new Vuex.Store({
	state:{
		data:'some data',
	},
	mutations: {
		updateData(state, newData) {
			state.data = newData;
		}
	}
});

// 使用store中的数据
<template>
	<div> {{ $store.state.data }} </div>
</template>

<template>
	<button @click="updateData"> update data </button>
</template>

<script>
	export default {
		methods: {
			updataData(){
				this.$store.commit('updateData', 'new data')
			}
		}
	}
</script>

4. $refs 访问子组件实例

使用$refs,父组件可以通过 $refs访问子组件实例,调用子组件的方法或访问其数据.

• 优点：
  在需要对子组件进行操作或获取其内部状态时非常方便。

• 缺点：
  违背了组件的封装原则，使父组件对子组件内部实现细节有过多了解和依赖。
  不适用于跨层级、非父子关系的组件间通信。

<!--父组件 -->
<template>
	<ChildComponent ref='child'>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
	components:{
		ChildComponent
	},
	mounted() {
		console.loog(this.$refs.child.childData); // 访问子组件数据
	},
}
</script>

<!--子组件 -->
<template>
	<div> {{ childData }} </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
	data() {
		return{
			childData:'some data'
		};
	},
};
</script>

5. Event Bus (全局事件总线)

• 优点：
  简化任意组件间的通信，尤其适合不具有直接关联关系的组件之间进行消息传递。

• 缺点：
  全局事件容易造成命名冲突，需要谨慎管理事件名称。
  当项目较大时，难以追踪事件的来源和去向，维护起来较困难。
  随着项目复杂度提升，过度依赖Event Bus会导致整体架构混乱，不易于调试和维护。

6. 使用provide 和 inject

这种方式允许父组件向所有子孙组件提供依赖,而不需要显式的传递props

• 优点：
  可以方便地在祖先组件中提供数据给任意后代组件，无需逐层传递props。

• 缺点：
  注入的数据不具备响应性（除非注入的是计算属性或者Vue实例的方法）。
  容易造成组件间隐式的强耦合，不利于组件独立性和可复用性

// 祖先组件提供数据
<script>
export default {
  provide() {
    return {
      ancestorData: this.someData
    };
  },
  data() {
    return {
      someData: '来自祖先的数据'
    };
  }
};
</script>

// 后代组件注入数据
<script>
export default {
  inject: ['ancestorData'],
  mounted() {
    console.log('从祖先获取的数据:', this.ancestorData);
  }
};
</script>