vue3组件常用的通信方式有哪些?

]

一、vue3组件常用的通信方式？

   * *vue3组件常用的通信方式(父传子、子传父、父直接获取子、pinia)**

二、使用步骤

提示：以下是本篇文章正文内容，下面案例可供参考

一、父传子？

属性传递（Props）：这是从父组件向子组件传递数据的最常用方式。
在父组件的模板中，你可以使用子组件标签并添加属性来传递数据。
子组件通过 props 选项来接收这些数据。

父组件代码

 <template>
    <div>
         <Son :par="arr"></Son>
    </div>
  </template>

  <script setup lang="ts">
    import Son from './son.vue'
    const arr='我是张三'
  </script>

  <style scoped >

  </style>

子组件代码:

 **子组件通过defineProps接受数据**

<template>
<div>
    子组件
</div>
</template>

<script setup lang="ts">
import {defineProps} from 'vue'
const {par}=defineProps(['par'])
console.log(par,'父组件传来的');

</script>

<style scoped >

</style>

运行效果

2.子传父

   事件发射（defineEmits）：子组件可以使用‘defineEmits定义一个自定义事件，
   并传递数据给父组件。父组件监听这个事件并处理数据。

代码如下（示例）

子组件代码

 <template>
      <div>
         <div @click="btn" class="box">

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

    <script setup lang="ts">
    import {defineEmits} from 'vue'
    // 定义一个自定义事件
    const emit=defineEmits(['up'])
    const value ='我是子组件'
        const btn=()=>{
       //向父组件传值
               emit('up',value)
        }

    </script>

    <style>
    .box{
        width: 100px;
        height: 100px;
        border: solid 1px red;
    }
    </style>

父组件代码

  <template>
      <div>
           父组件
           <Son1 @up="btns" ></Son1>
      </div>
    </template>

    <script setup lang="ts">
      import Son1 from './son1.vue'
     const btns=(aa:string)=>{
          console.log(aa,'子组件传来的值');   
     }
    </script>

    <style scoped >

    </style>

运行效果

3.父直接获取子

  子组件通过defineExpose暴露给父组件

代码如下（示例）

子组件代码

<template>
  <div>
       子组件
  </div>
</template>

<script setup lang="ts">
   import { ref,defineExpose } from 'vue';
   const arr=ref('你好')
  //通过defineExpose暴露
  defineExpose({arr})
</script>

<style>

</style>

父组件代码

<template>
  <div>
       父组件
       <Son3 ref="childRef"></Son3>
       <button @click="btn">点击</button>
  </div>
</template>

<script setup lang="ts">
   import Son3 from './son3.vue'
  import { ref } from 'vue';

const childRef=ref()
const btn=()=>{
       console.log(childRef.value.arr);
       
}
</script>

<style scoped >

</style>

代码效果

4.pinia使用

        状态管理：Pinia 是 Vue 3 的状态管理库，它允许你在多个组件
    之间共享和管理状态。Pinia 提供了更简洁、更直观的方式来管理全局状态。

首先，安装 Pinia
npm i pinia
然后，在 Vue 中main.ts设置 Pinia

      import { createApp } from 'vue'
      import { createPinia } from 'pinia'
      import App from './App.vue'
      import router from './router'
      const app = createApp(App)
      app.use(createPinia())
      app.use(router)
      app.mount('#app')

接下来，你可以定义和使用 store

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
    randomizeCounter() {
      this.count = Math.round(100 * Math.random())
    },
  },
})

​在组件中使用

<template>
  <div>
        <button @click="store.randomizeCounter()">Randomize
      </button>
        {{ store.count }}
  </div>
</template>

<script setup lang="ts">



  import { useCounterStore } from '../stores/counter';
  const store = useCounterStore()
// 将 action 作为 store 的方法进行调用
store.randomizeCounter()
</script>

<style scoped >

</style>

效果