关于javascript:组件通信

Vue 3 中组件之间的通信形式有很多种，上面我将列举一些罕用的通信形式，包含父传子、子传父、父间接获取子以及应用 pinia 进行状态治理。

1. 父传子（Props）
   父组件通过 props 将数据传递给子组件。

父组件：

vue

<template>    <ChildComponent :message="parentMessage" />  </template>  <script>  import ChildComponent from './ChildComponent.vue';  export default {    components: {      ChildComponent    },    data() {      return {        parentMessage: 'Hello from Parent'      };    }  };  </script>

子组件：

vue

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

2. 子传父（Events）
   子组件通过触发自定义事件将数据传递给父组件。

子组件：

vue

<template>    <button @click="notifyParent">Notify Parent</button>  </template>  <script>  export default {    methods: {      notifyParent() {        const childMessage = 'Hello from Child';        this.$emit('child-event', childMessage);      }    }  };  </script>

父组件：

vue

<template>    <ChildComponent @child-event="handleChildEvent" />  </template>  <script>  import ChildComponent from './ChildComponent.vue';  export default {    components: {      ChildComponent    },    methods: {      handleChildEvent(childMessage) {        console.log(childMessage);      }    }  };  </script>

3. 父间接获取子（Refs）
   父组件能够应用 ref 间接拜访子组件的实例或 DOM 元素。

父组件：

vue

<template>    <ChildComponent ref="childRef" />  </template>  <script>  import ChildComponent from './ChildComponent.vue';  export default {    components: {      ChildComponent    },    mounted() {      console.log(this.$refs.childRef); // 拜访子组件实例    }  };  </script>

4. Pinia
   Pinia 是一个专为 Vue 3 设计的状态治理库，用于跨组件共享状态。

装置 Pinia：

bash
npm install pinia
应用 Pinia：

首先，在利用的入口文件（如 main.js 或 main.ts）中装置 Pinia 插件：

javascript

import { createApp } from 'vue';  import { createPinia } from 'pinia';  import App from './App.vue';  const app = createApp(App);  app.use(createPinia());  app.mount('#app');而后，在组件中应用 Pinia：

Store：

javascript
// store.js

import { defineStore } from 'pinia';  export const useStore = defineStore('main', {    state: () => ({      count: 0    }),    actions: {      increment() {        this.count++;      }    }  });

组件：

vue

<template>    <div>      <p>{{ count }}</p>      <button @click="increment">Increment</button>    </div>  </template>  <script>  import { useStore } from './store';  export default {    setup() {      const store = useStore();      return {        count: store.count,        increment: store.increment      };    }  };  </script>

这些是在 Vue 3 中罕用的组件通信形式。依据具体的利用场景和需要，你能够抉择适宜的形式来实现组件间的通信。