<article class=“article fmt article-content”><h2>形式一：props</h2><p>props是实现父组件向子组件传递信息，props的数据是只读的。</p><p>应用实例：</p><p>父组件：</p><pre><code><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></code></pre><p>子组件：须要应用到<strong>defineProps</strong>办法去承受父组件传递过去的数据。</p><pre><code><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></code></pre><p>效果图：<br/></p><h2>形式二：emit</h2><p>emit形式是Vue3中最常见的组件通信形式，该形式用于子传父。</p><p>父组件中：</p><pre><code><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></code></pre><p>子组件中：</p><pre><code><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></code></pre><p>成果视频：<br/></p><h2>办法三：pinia</h2><p>Pinia 是一个专门为Vue.js设计的状态治理库，它提供了一种简略和直观的形式来管理应用程序的状态。在应用Pinia时，能够轻松地创立定义状态的存储，而后将其与Vue组件绑定，使它们可能应用该状态。与Vuex相比，Pinia 更加简略易用，体积更小，同时具备更好的 TypeScript 反对和插件零碎。</p><h4>装置和配置Pinia</h4><pre><code>yarn add pinia# 或者应用 npmnpm install pinia</code></pre><p>在装置完Pinia包之后，须要在main.ts文件中导入createPinia函数并将Pinia插件与Vue应用程序绑定，如下所示：</p><pre><code>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’);</code></pre><p>应用 createPinia() 函数创立并初始化Pinia插件实例，将其与Vue应用程序绑定应用app.use(pinia)。至此，咱们就能够应用Pinia来治理Vue应用程序的状态了。</p><p>在src下创立stores文件夹，而后在stores文件夹创立counter.ts文件，外面配置如下：</p><pre><code>import { defineStore } from ‘pinia’export const useStore = defineStore(‘storeId’, { state: () => { return { } }, getters: { }, actions: { },})</code></pre></article>