关于vue3:vue3组件常用的通信方式

形式一：props

props是实现父组件向子组件传递信息，props的数据是只读的。

应用实例：

父组件：

<script setup lang="ts">
   // 导入子组件
   import Child from './Child.vue'

   import { ref } from 'vue';
   const money = ref(1000);
</script>

<template>
  <div class="box">
    <h1>我是父组件</h1>
    <hr />
    <Child info="我是父组件参数" :money="money"></Child>
  </div>
</template>

子组件：须要应用到defineProps办法去承受父组件传递过去的数据。

<script setup lang="ts">
//defineProps是Vue3提供办法,不须要引入间接应用
let props = defineProps(['info','money']); //数组|对象写法都能够
</script>

<template>
    <div class="box">
      <h1>我是子组件</h1>
      <div style="color: red;">{{info}}<p>{{money}}</p></div>
    </div>
 </template>

效果图：

形式二：emit

emit形式是Vue3中最常见的组件通信形式，该形式用于子传父。

父组件中：

<template>
  <h1>我是父组件</h1>
  <p style="color: brown;">{{ list }}</p>
  <hr />
  <!-- add是子组件要传递的事件名称,handleAdd是监听到之后执行的事件 -->
  <Child @add="handleAdd"></Child>
</template>

<script setup lang="ts">
   // 导入子组件
   import Child from './Child.vue'；
   import { ref } from 'vue';

   const list = ref("")；
   const handleAdd = (item: string) => {
      list.value = item;
   };       
</script>

子组件中：

<script setup lang="ts">
    const emits = defineEmits(['add']);
    const handleBtn = () => {
       emits('add', '哈哈哈哈,我是子组件参数');
    }
</script>

<template>
  <div class="box">
    <h1>我是子组件</h1>
    <button @click="handleBtn">点击我</button>
 </div>
</template>

成果视频：

办法三：pinia

Pinia 是一个专门为Vue.js设计的状态治理库，它提供了一种简略和直观的形式来管理应用程序的状态。在应用Pinia时，能够轻松地创立定义状态的存储，而后将其与Vue组件绑定，使它们可能应用该状态。与Vuex相比，Pinia 更加简略易用，体积更小，同时具备更好的 TypeScript 反对和插件零碎。

装置和配置Pinia

yarn add pinia
# 或者应用 npm
npm install pinia

在装置完Pinia包之后，须要在main.ts文件中导入createPinia函数并将Pinia插件与Vue应用程序绑定，如下所示：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);

const pinia = createPinia();
app.use(pinia);

app.mount('#app');

应用 createPinia() 函数创立并初始化Pinia插件实例，将其与Vue应用程序绑定应用app.use(pinia)。至此，咱们就能够应用Pinia来治理Vue应用程序的状态了。

在src下创立stores文件夹，而后在stores文件夹创立counter.ts文件，外面配置如下：

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {

    }
  },
  getters: {

  },
  actions: {

  },
})