vue3学习记录二组件之间的通信方式

二 组件之间的通信方式

- 使用 props 将数据从父组件传递到子组件。
- 使用 $emit 触发父组件中的方法。
- 使用 Event Bus 创建一个中央事件总线来跨组件通信。
- 使用 Vuex 在多个组件之间共享状态。

1. 使用 props 将数据从父组件传递到子组件：

// 父组件
<template>
  <div>
    <ChildComponent :message="message" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      message: 'Hello'
    }
  }
}
</script>

// 子组件
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
}
</script>

在子组件中，你可以使用 props 属性接收父组件传递的数据。例如：

<template>
  <div>
    {{ name }} {{ age }}
  </div>
</template>

<script>
export default {
  props: ['name', 'age']
};
</script>

2. 使用 $emit 触发父组件中的方法：

// 父组件
<template>
  <div>
    <ChildComponent @custom="customMethod" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    customMethod (message) {
      console.log(message)
    }
  }
}
</script>

// 子组件
<template>
  <button @click="$emit('custom', 'Hello')">Emit</button>
</template>

<script>
export default {

}
</script>

3.  Event Bus 并不是 Vue 3 官方推荐的通信方式
事件总线是一种常用的用于跨组件通信的方式。
事件总线通常是一个单独的对象，其他组件可以通过订阅或发布事件来与之通信。
这样，组件之间就无需直接交互，而是通过事件总线来进行通信。

下面是一个使用 Event Bus 创建事件总线的简单示例：

import Vue from 'vue';

const EventBus = new Vue();

export default EventBus;

// 然后，其他组件就可以通过调用 EventBus.$emit 来发布事件，并通过调用 EventBus.$on 来订阅事件。

// 例如，在一个组件中发布事件：

// 组件A
import EventBus from './event-bus';

EventBus.$emit('some-event', data);
在另一个组件中订阅事件：

组件B
import EventBus from './event-bus';

EventBus.$on('some-event', (data) => {
  // 处理事件
});
// 注意，在使用完事件后，应该调用 EventBus.$off 来取消订阅，以避免内存泄漏。

4. 使用VueX

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: 'Hello'
  },
  mutations: {
    updateMessage (state, message) {
      state.message = message
    }
  },
  actions: {
    updateMessage ({ commit }, message) {
      commit('updateMessage', message)
    }
  }
})

// main.js
import store from './store.js'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

// 组件 A
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapActions(['updateMessage'])
  }
}

// 组件 B
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['message'])
  }
}

思考：nue Vue() 做了什么