1. Surveillance

<template>
  <div>
    <p>Count: {
   
   { count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

// 使用 watch 监听 count 的变化
watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});
</script>

2. Passer des valeurs de parent à enfant :

1. De père en fils :

Nous avons un composant parent ParentComponent et un composant enfant ChildComponent. Dans le composant parent, nous utilisons :childProp="parentData" pour transmettre des données au composant enfant. Dans le composant enfant, nous utilisons defineProps pour recevoir les propriétés (props) transmises par le composant parent.

ParentComponent.vue :

<template>
  <div>
    <p>我是父组件</p>
    <ChildComponent :childProp="parentData" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const parentData = ref('Hello from parent');
</script>

ChildComponent.vue :

<template>
  <div>
    <p>子组件接收的数据: {
   
   { childProp }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  childProp: String
});
</script>

2, père enfant

Dans le composant parent, nous utilisons @childEvent="handleChildEvent" pour écouter l'événement childEvent du composant enfant et recevoir les données transmises par le composant enfant dans la méthode handleChildEvent. De cette façon, lorsque le bouton est cliqué dans le composant enfant, le composant enfant transmettra les données au composant parent via l'événement personnalisé, et le composant parent écoutera l'événement et recevra les données.

ChildComponent.vue :

<template>
  <button @click="sendDataToParent">向父组件传递数据</button>
</template>

<script setup>
import { defineEmits } from 'vue';

const emits = defineEmits(['childEvent']);

const sendDataToParent = () => {
  emits('childEvent', 'Hello from child');
};
</script>

Dans le composant enfant, nous utilisons defineEmits pour définir un événement personnalisé childEvent, puis déclenchons l'événement via la méthode sendDataToParent et transmettons les données 'Hello from child'

ParentComponent.vue :

<template>
  <div>
    <p>来自子组件的数据: {
   
   { dataFromChild }}</p>
    <ChildComponent @childEvent="handleChildEvent" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const dataFromChild = ref('');

const handleChildEvent = (data) => {
  dataFromChild.value = data;
};
</script>

3. Gestion globale des états (Vuex) :

Vuex est une bibliothèque de gestion d'état officiellement fournie par Vue, qui est utilisée pour gérer l'état partagé de l'application. Avec Vuex, vous pouvez accéder et modifier l'état global de n'importe quel composant pour partager des données entre les composants.

Voici quelques étapes simples, basées sur un exemple de code, montrant comment configurer et utiliser Vuex.

Installez Vuex : Tout d'abord, assurez-vous que Vuex est installé dans votre projet :
```
cnpm install vuex
```

Créer Vuex Store : créez un magasin Vuex dans votre application pour gérer l'état global. Écrivez le code suivant dans un fichier appelé store.js :

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    mutationsIncrement(state, newCount) {
      state.count = newCount;
    }
  },
  actions: {
    increment(context, count) {
      context.commit('mutationsIncrement', count);
    }
  },
  getters: {
    getCount(state) {
      return state.count;
    }
  }
});

export default store;

Utiliser Vuex Store dans l'application principale : Introduire et utiliser le magasin Vuex créé dans l'application principale :
Dans main.js :

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

Utilisation de Vuex dans les composants : utilisez l'état, les mutations, les actions et les getters de Vuex dans vos composants.
Utiliser l'état dans les composants :

<template>
  <div>
    <p>Count: {
     
     { count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { useStore } from 'vuex';

const store = useStore();
const count = ref('')

const increment = () => {
  // 修改 count
  store.commit('increment', 'This is new');
  // 获取 count
  count.value = store.state.count
};
</script>

Ceci est juste un exemple simple montrant comment configurer et utiliser Vuex. En pratique, vous pouvez gérer plus d'états, de mutations, d'actions et de getters dans le magasin pour répondre aux besoins de votre projet. Si vous avez besoin d'informations plus détaillées sur Vuex, il est recommandé de consulter la documentation officielle de Vuex.

Quatrièmement, le bus événementiel (Event Bus) :

Un bus d'événements est un modèle permettant de transmettre des événements et des données entre des composants, et il peut être utilisé pour des scénarios de communication simples. Vous pouvez créer une instance Vue en tant que bus d'événements, puis utiliser cette instance dans les composants requis pour écouter et déclencher des événements.

Il n'y a pas de méthodes d'activation et d'émission dans Vue 3, qui sont utilisées pour surveiller et déclencher des événements personnalisés pour le bus d'événements global. Vue 3 recommande d'utiliser des bibliothèques tierces telles que mitt.

Voici un exemple simple de création et d'utilisation d'un bus d'événements :

Installez la bibliothèque mitt :

cnpm install mitt

EventBus.js :

Créez une instance de mitt en tant que bus d'événements, puis introduisez cette instance dans le composant pour la surveillance et le déclenchement d'événements.

import mitt from 'mitt';

const eventBus = mitt();

export default eventBus;

ComposantA.vue :

Dans un composant, vous pouvez utiliser l'instance de bus d'événements pour déclencher des événements.

<template>
  <div>
    <button @click="sendMessage">发送消息到组件B</button>
  </div>
</template>

<script setup>
import eventBus from './EventBus';

const sendMessage = () => {
  eventBus.emit('message', 'Hello from Component A');
};
</script>

ComposantB.vue :

Dans un autre composant, vous pouvez utiliser une instance de bus d'événements pour écouter les événements d'autres composants.

<template>
  <div>
    
  </div>
</template>

<script setup>
import eventBus from './EventBus';
import { ref, onMounted } from 'vue';

const receivedMessage = ref('');

onMounted(() => {
  eventBus.on('message', (message) => {
    receivedMessage.value = message;
    console.log('接收到的消息：', receivedMessage.value)
  });
});
</script>

Dans cet exemple, nous créons une instance de bus d'événement eventBus et utilisons eventBus.emit dans le composant ComponentA pour déclencher l'événement de message, puis utilisons eventBus.on dans le composant ComponentB pour écouter l'événement de message et mettons à jour le récepteur lorsque l'événement est déclenché nouvelles reçues.

Veuillez noter que le modèle de bus d'événements convient à des scénarios de communication simples, mais à mesure que l'application devient plus complexe, la gestion et la maintenance des événements peuvent devenir difficiles. Pour des besoins de communication plus complexes, vous pouvez envisager d'utiliser d'autres méthodes de communication telles que Vuex ou d'autres outils de gestion d'état.

Écoute dans vue3, communication de composants tels que le passage de valeur parent-enfant, utilisation de Vuex, Event Bus