Tabla de contenido

1. Monitoreo

<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. Pasar valores de padre a hijo:

1. De padre a hijo:

Tenemos un componente principal ParentComponent y un componente secundario ChildComponent. En el componente principal, usamos :childProp="parentData" para pasar datos al componente secundario. En el componente secundario, usamos defineProps para recibir las propiedades (props) pasadas por el componente principal.

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, hijo padre

En el componente principal, usamos @childEvent="handleChildEvent" para escuchar el evento childEvent del componente secundario y recibir los datos pasados por el componente secundario en el método handleChildEvent. De esta forma, cuando se hace clic en el botón del componente secundario, el componente secundario pasará los datos al componente principal a través del evento personalizado, y el componente principal escuchará el evento y recibirá los datos.

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>

En el componente secundario, usamos defineEmits para definir un evento personalizado childEvent, luego activamos el evento a través del método sendDataToParent y pasamos los datos '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. Gestión del estado global (Vuex):

Vuex es una biblioteca de administración de estado proporcionada oficialmente por Vue, que se utiliza para administrar el estado compartido de la aplicación. A través de Vuex, puede acceder y modificar el estado global en cualquier componente y compartir datos entre componentes.

Estos son algunos pasos simples, basados en un código de muestra, que muestran cómo configurar y usar Vuex.

Instale Vuex : Primero, asegúrese de tener Vuex instalado en su proyecto:
```
cnpm install vuex
```

Crear tienda Vuex : cree una tienda Vuex en su aplicación para administrar el estado global. Escriba el siguiente código en un archivo llamado 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 en la aplicación principal : Presente y use la tienda Vuex creada en la aplicación principal:
En 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');

Uso de Vuex en componentes : use estado, mutaciones, acciones y captadores en Vuex en sus componentes.
Usar estado en 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 es solo un ejemplo simple que muestra cómo configurar y usar Vuex. En la práctica, puede administrar más estados, mutaciones, acciones y captadores en la tienda para satisfacer las necesidades de su proyecto. Si necesitas información más detallada sobre Vuex, se recomienda consultar la documentación oficial de Vuex.

Cuarto, el bus de eventos (Event Bus) :

Un bus de eventos es un patrón para pasar eventos y datos entre componentes, y puede usarse para escenarios de comunicación simples. Puede crear una instancia de Vue como un bus de eventos y luego usar esta instancia en los componentes requeridos para escuchar y desencadenar eventos.

No hay métodos on y emit en Vue 3, que se usan para monitorear y activar eventos personalizados para el bus de eventos global. Vue 3 recomienda usar bibliotecas de terceros como mitt.

Aquí hay un ejemplo simple de cómo crear y usar un bus de eventos:

Instale la biblioteca de guantes :

cnpm install mitt

EventBus.js :

Cree una instancia de mitt como un bus de eventos y luego introduzca esta instancia en el componente para el monitoreo y la activación de eventos.

import mitt from 'mitt';

const eventBus = mitt();

export default eventBus;

ComponenteA.vue :

En un componente, puede utilizar la instancia del bus de eventos para activar 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>

ComponentB.vue :

En otro componente, puede usar una instancia de bus de eventos para escuchar eventos de otros 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>

En este ejemplo, creamos una instancia de bus de eventos eventBus y usamos eventBus.emit en el componente ComponentA para activar el evento del mensaje, luego usamos eventBus.on en el componente ComponentB para escuchar el evento del mensaje y actualizamos el receptor cuando el evento se dispara la noticia recibida.

Tenga en cuenta que el patrón de bus de eventos es adecuado para escenarios de comunicación simples, pero a medida que la aplicación se vuelve más compleja, la gestión y el mantenimiento de eventos pueden volverse difíciles. Para necesidades de comunicación más complejas, puede considerar usar otros métodos de comunicación como Vuex u otras herramientas de administración de estado.

Escuchar en vue3, comunicación de componentes como el paso de valor padre-hijo, uso de Vuex, Event Bus