Vue 中常见的三种
组件之间通信的
方式如下：
### Props 和 $emit
这是最基础的父子
组件通信方式。父
组件通过 `props` 向子
组件传递数据，子
组件通过 `$emit` 触发自定义事件向父
组件发送数据。
- **父
组件示例**：
```
vue
<template>
<div>
<ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
</div>
</template>
<script>
import ChildComponent from '
./ChildComponent
.vue';
export default {
components: {
ChildComponent
},
data
() {
return {
parentMessage: 'Hello from parent'
};
},
methods: {
handleChildEvent
(data
) {
console
.log
('Received from child:', data
);
}
}
};
</script>
```
- **子
组件示例**：
```
vue
<template>
<div>
<p>{{ message }}</p>
<button @click="sendDataToParent">Send data to parent</button>
</div>
</template>
<script>
export default {
props: ['message'],
methods: {
sendDataToParent
() {
this
.$emit
('childEvent', 'Hello from child'
);
}
}
};
</script>
```
这种
方式适合父子
组件间的基础
通信，增加了
组件间的
通信，也表现出了
Vue 的弹性，可根据意愿添加
组件联系[^
1]。
### Event Bus
Event Bus 适合于任意
组件间的
通信，特别是小型项目的跨
组件通信。它的原理是创建一个事件总线对象，
组件可以通过这个对象发布和订阅事件。
```
javascript
// eventBus
.js
import
Vue from '
vue';
export const eventBus = new
Vue();
```
```
vue
// 发送事件的
组件
<template>
<button @click="sendEvent">Send Event</button>
</template>
<script>
import { eventBus } from '
./eventBus
.js';
export default {
methods: {
sendEvent
() {
eventBus
.$emit
('customEvent', 'Event data'
);
}
}
};
</script>
```
```
vue
// 接收事件的
组件
<template>
<div></div>
</template>
<script>
import { eventBus } from '
./eventBus
.js';
export default {
created
() {
eventBus
.$on
('customEvent',
(data
) => {
console
.log
('Received event data:', data
);
}
);
}
};
</script>
```
###
Vuex
Vuex 是一个专为
Vue.js 应用程序开发的状态管理模式。它采用集中式存储应用的所有
组件的状态，并以相应的规则保证状态以一种可预测的
方式发生变化，适合中大型项目的状态管理。
```
javascript
// store
.js
import
Vue from '
vue';
import
Vuex from '
vuex';
Vue.use
(Vuex);
export default new
Vuex.Store
({
state: {
count: 0
},
mutations: {
increment
(state
) {
state
.count++;
}
},
actions: {
incrementAsync
({ commit }
) {
setTimeout
(() => {
commit
('increment'
);
},
1000
);
}
},
getters: {
getCount:
(state
) => state
.count
}
}
);
```
```
vue
//
组件中
使用
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { mapState, mapMutations } from '
vuex';
export default {
computed: {
...mapState
(['count']
)
},
methods: {
...mapMutations
(['increment']
)
}
};
</script>
```
扫一扫
9999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
