1. Monitoramento

<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. Passando valores de pai para filho:

1. De pai para filho:

Temos um componente pai ParentComponent e um componente filho ChildComponent. No componente pai, usamos :childProp="parentData" para passar dados para o componente filho. No componente filho, usamos defineProps para receber as propriedades (props) passadas pelo componente pai.

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, filho pai

No componente pai, usamos @childEvent="handleChildEvent" para escutar o evento childEvent do componente filho, e receber os dados passados pelo componente filho no método handleChildEvent. Dessa forma, quando o botão for clicado no componente filho, o componente filho passará os dados para o componente pai por meio do evento personalizado, e o componente pai ouvirá o evento e receberá os dados.

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>

No componente filho, usamos defineEmits para definir um evento personalizado childEvent, acionar o evento por meio do método sendDataToParent e passar os dados '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. Gerenciamento de estado global (Vuex):

Vuex é uma biblioteca de gerenciamento de estado fornecida oficialmente pelo Vue, que é usada para gerenciar o estado compartilhado do aplicativo. Por meio do Vuex, você pode acessar e modificar o estado global em qualquer componente e realizar o compartilhamento de dados entre os componentes.

Aqui estão algumas etapas simples, com base no código de amostra, mostrando como configurar e usar o Vuex.

Instale o Vuex : Primeiro, certifique-se de ter o Vuex instalado em seu projeto:
```
cnpm install vuex
```

Create Vuex Store : Crie uma loja Vuex em seu aplicativo para gerenciar o estado global. Escreva o seguinte código em um arquivo chamado 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;

Use Vuex Store no aplicativo principal : Apresente e use o Vuex store criado no aplicativo principal:
Em 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');

Usando Vuex em Componentes : Use estado, mutações, ações e getters em Vuex em seus componentes.
Use o estado em componentes:

<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>

Este é apenas um exemplo simples que mostra como configurar e usar o Vuex. Na prática, você pode gerenciar mais estados, mutações, ações e getters na loja para atender às necessidades do seu projeto. Se você precisar de informações mais detalhadas sobre o Vuex, é recomendável consultar a documentação oficial do Vuex.

Em quarto lugar, o barramento de eventos (Event Bus) :

Um barramento de eventos é um padrão para passar eventos e dados entre componentes e pode ser usado para cenários de comunicação simples. Você pode criar uma instância Vue como um barramento de eventos e, em seguida, usar essa instância nos componentes necessários para ouvir e acionar eventos.

Não há métodos on e emit no Vue 3, que são usados para monitorar e acionar eventos personalizados para o barramento de eventos global. O Vue 3 recomenda o uso de bibliotecas de terceiros, como mitt.

Aqui está um exemplo simples de criação e uso de um barramento de eventos:

Instale a biblioteca mitt :

cnpm install mitt

EventBus.js :

Crie uma instância de luva como um barramento de eventos e, em seguida, introduza essa instância no componente para monitoramento e acionamento de eventos.

import mitt from 'mitt';

const eventBus = mitt();

export default eventBus;

ComponentA.vue :

Em um componente, você pode usar a instância do barramento de eventos para disparar eventos.

<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>

ComponenteB.vue :

Em outro componente, você pode usar uma instância de barramento de eventos para escutar eventos de outros componentes.

<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>

Neste exemplo, criamos uma instância de barramento de evento eventBus e usamos eventBus.emit no componente ComponentA para acionar o evento de mensagem, então usamos eventBus.on no componente ComponentB para ouvir o evento de mensagem e atualizamos o receptor quando o evento é acionado notícias recebidas.

Observe que o padrão de barramento de eventos é adequado para cenários de comunicação simples, mas à medida que o aplicativo se torna mais complexo, o gerenciamento e a manutenção de eventos podem se tornar difíceis. Para necessidades de comunicação mais complexas, você pode considerar o uso de outros métodos de comunicação, como Vuex ou outras ferramentas de gerenciamento de estado.

Ouvindo em vue3, comunicação de componentes, como passagem de valor pai-filho, uso de Vuex, barramento de eventos