关于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: {},})