vue3学习纪录-组件通讯

1.父子组件通讯

父组件：

1. <template>
2.   父组件原有的title:{{ title }}
3.   <p>---</p>
4.   <com :title="title" :flag="true" @changeTitle="changeTitle"></com>
5. </template>
7. <script setup>
8. import { computed, ref } from 'vue'
9. import com from './components/com.vue'
10. let title = ref('我是标题')
11. function changeTitle(newTitle){
12.   title.value = newTitle
13. }
14. </script>
16. <style></style>

复制代码

子组件：

1. <template>
2.     <div>
3.         我是子组件
4.         <p>子组件的title:{{ title }}</p>
5.         <button @click="changeTitle1">我要给父组件传参</button>
6.     </div>
7. </template>
9. <script setup>
10. defineProps({
11.     title: {
12.         default: '',
13.         type: String
14.     },
15.     flag: Boolean
16. })
17. const emit1 = defineEmits(['changeTitle'])
18. function changeTitle1() {
19.     emit1('changeTitle', '我是子组件传给父组件的参数')
20. }
22. //子传父事件
23. //1.const emit1 = defineEmits(['changeTitle'])定义emit
24. //2.直接在事件后 emit1('changeTitle', '我是子组件传给父组件的参数')，然后父组件接收
26. </script>
28. <style lang="scss" scoped></style>

复制代码

defineProps父传子定义，defineEmits子传父定义
2.兄弟组件传值

2.1 以父组件为媒介

1. //App.vue
2. <script setup>
3. import A from './components/A.vue';
4. import B from './components/B.vue';
5. import { ref } from 'vue';
6. const mainFlag = ref(false)
7. const clickEvent1 = (val) => {
8.   mainFlag.value = val
9.   console.log('clickEvent', val);
10. };
11. </script>
14. <template>
15.   <A @clickEvent="clickEvent1"></A>
16.   <B :mainFlag="mainFlag"></B>
17. </template>
19. <style scoped></style>
21. //A.vue
22. <template>
23.   <div class="container">
24.     <p>我是A组件
25.     </p>
26.     <el-button @click="clickEvent1">分发事件</el-button>
27.   </div>
28.   </template>
29.   
30.   <script setup>
31.   import { ref, reactive} from 'vue'
32.   const flag = ref(false)
33.   const clickEvent1 = () =>{
34.     flag.value =!flag.value
35.     emit1('clickEvent',flag.value)
36.   }
37.   const emit1 = defineEmits(['clickEvent'])
38.   </script>
39.   <style lang='scss' scoped>
40.   .container{
41.       width: 200px;
42.       height: 200px;
43.       background-color: lightcoral;
44.       margin-bottom: 10px;
45.   }
46.   </style>
47. //B.vue
48. <template>
49.   <div class="container">
50.       <p>我是B组件</p>
51.       {{ mainFlag }}
52.   </div>
53. </template>
55. <script setup>
56. import { ref, reactive } from 'vue'
57. defineProps({
58.   mainFlag: {
59.       type: Boolean,
60.       required: true
61.   }
62. })
64. </script>
65. <style lang='scss' scoped>
66. .container {
67.   width: 200px;
68.   height: 200px;
69.   background-color: lightblue;
70. }
71. </style>

复制代码

A组件分发事件给父组件，父组件再把值传给B组件。这样是可以的，但是写法不太浅易，层级多了就要递传。
2.2 发布订阅模式

1. // eventBus.js
3. class EventBus {
4.     constructor() {
5.         this.events = new Map();
6.     }
8.     // 订阅事件
9.     on(eventName, callback) {
10.         if (!this.events.has(eventName)) {
11.             this.events.set(eventName, []);
12.         }
13.         this.events.get(eventName).push(callback);
14.     }
16.     // 取消订阅
17.     off(eventName, callback) {
18.         if (!this.events.has(eventName)) return;
19.         const callbacks = this.events.get(eventName);
20.         const index = callbacks.indexOf(callback);
21.         if (index !== -1) {
22.             callbacks.splice(index, 1);
23.         }
24.     }
26.     // 发布事件
27.     emit(eventName, ...args) {
28.        const callbacks = this.events.get(eventName) || [];
29.        callbacks.forEach(callback => callback(...args));
30.     }
31. }
33. export default new EventBus();

复制代码

2.3 使用mitt

安装依靠
   npm install mitt
  2.3.1 全局使用

1. //main.js
2. import { createApp } from 'vue'
3. import './style.css'
4. import App from './App.vue'
5. import mitt from 'mitt'
7. const emitter = mitt()
9. const app = createApp(App)
10. app.config.globalProperties.$EventBus = emitter
12. app.mount('#app')
14. <!-- ComponentA.vue -->
15. <script setup>
16. import { ref,getCurrentInstance } from 'vue'
17. const message = ref('')
18. const { proxy } = getCurrentInstance()
19. const sendMessage2 = () => {
20.   proxy.$EventBus.emit('new-message', message.value)
21.   message.value = ''
22. }
23. onBeforeUnmount(() =>{
24.   proxy.$EventBus.off('new-message')
25. })
26. </script>
27. <template>
28.   <div>
29.     <input v-model="message" placeholder="输入消息" />
30.     <button @click="sendMessage2">发送消息2</button>
31.   </div>
32. </template>
34. <!-- ComponentB.vue -->
35. <script setup>
36. import { ref, onMounted, onUnmounted,getCurrentInstance } from 'vue'
37. const receivedMessages = ref([])
38. const {proxy} = getCurrentInstance()
40. const onNewMessage = (msg) => {
41.   receivedMessages.value.push(msg)
42. }
43. onMounted(() => {
44.   proxy.$EventBus.on('new-message', onNewMessage)
45. })
46. onUnmounted(() => {
47.   proxy.$EventBus.off('new-message', onNewMessage)
48. })
49. </script>
50. <template>
51.   <div>
52.     <h2>接收到的消息：</h2>
53.     <ul>
54.       <li v-for="(msg, index) in receivedMessages" :key="index">{{ msg }}</li>
55.     </ul>
56.   </div>
57. </template>

复制代码

2.3.2 局部使用

1. // eventBus.js
2. import { ref } from 'vue'
3. import mitt from 'mitt'
5. const emitter = mitt()
6. const bus = ref(emitter)
8. export default bus
10. <!-- ComponentA.vue -->
11. <script setup>
12. import { ref, getCurrentInstance, onBeforeUnmount } from 'vue'
13. import bus from '../eventBus'
15. const message = ref('')
16. const { proxy } = getCurrentInstance()
18. const sendMessage = () => {
19.   bus.value.emit('new-message', message.value)
20.   message.value = ''
21. }
23. const sendMessage2 = () => {
24.   proxy.$EventBus.emit('new-message', message.value)
25.   message.value = ''
26. }
27. onBeforeUnmount(
28.   () => {
29.     proxy.$EventBus.off('new-message')
30.     bus.value.off('new-message')
31.   }
32. )
34. </script>
36. <template>
37.   <div>
38.     <input v-model="message" placeholder="输入消息" />
39.     <button @click="sendMessage">发送消息</button>
40.     <button @click="sendMessage2">发送消息2</button>
41.   </div>
42. </template>
44. <!-- ComponentB.vue -->
45. <script setup>
46. import { ref, onMounted, onUnmounted,getCurrentInstance } from 'vue'
47. import bus from '../eventBus'
49. const receivedMessages = ref([])
50. const {proxy} = getCurrentInstance()
52. const onNewMessage = (msg) => {
53.   receivedMessages.value.push(msg)
54. }
56. onMounted(() => {
57.   proxy.$EventBus.on('new-message', onNewMessage)
58.   bus.value.on('new-message', onNewMessage)
59. })
61. onUnmounted(() => {
62.   proxy.$EventBus.off('new-message', onNewMessage)
63.   bus.value.off('new-message', onNewMessage)
64. })
65. </script>
67. <template>
68.   <div>
69.     <h2>接收到的消息：</h2>
70.     <ul>
71.       <li v-for="(msg, index) in receivedMessages" :key="index">{{ msg }}</li>
72.     </ul>
73.   </div>
74. </template>

复制代码

其实试了下，两个都可以一起用。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。