<article class=“article fmt article-content”><p>vue3组件罕用的通信形式有很多，<strong>父传子</strong>*， <strong>子传父</strong>，<strong>父间接获取子ref</strong>,<strong>pinia</strong>，pinia在vue3中替换了vuex，更简洁，方便使用操作。<strong>EventBus公交车</strong>，<strong>provide + inject</strong>等。</p><h3>一、父传子(props)</h3><p>父传子是通过父组件自定义标签增加属性，并传递数据给子组件，子组件接管通过 引入vue插件 解构 <code>defineProps</code>,调用并创立 <code>props</code>，同时指定要接管的数据名称。</p><pre><code> const props = defineProps([‘传递的数据名称’]) </code></pre><p>案例:</p><pre><code>父组件 在views文件夹中创立文件Home.vue<script setup lang=“ts”>// 引入vue插件import { ref } from “vue”// 引入子组件 import Son from “../components/Son.vue”// 定义传递给子组件的数据const title = ref(“我是子组件”)</script><template> <h1>父组件</h1> <!– 应用子组件 –> <Son :title=“title”></Son></template>子组件 在components文件夹中创立Son.vue<script setup lang=“ts”>// 引入vue 解构 须要的办法import { defineProps } from “vue”// 调用defineProps办法并获取父组件传递的数据// const props = defineProps([’title’])const { title } = defineProps([’title’]) // 能够简写 解构</script><template> <!– 渲染父组件传递的数据 –> <h1>{{ title }}</h1></template>路由：import { createRouter, createWebHistory } from ‘vue-router’const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: ‘/’, redirect: “/home” }, { path: ‘/home’, name: ‘about’, component: () => import(’../views/Home.vue’) } ]})export default router</code></pre><p>效果图:<br/></p><h3>二、子传父(emit)自定义事件</h3><p>子传父通过 父组件给子组件标签绑定自定义事件，将事件函数定义在父组件中，子组件中通过从 vue 中解构 <code>defineEmits</code>，调用并创立emit，同时接管父组件给绑定的事件。调用 <code>emit</code>触发父组件给绑定的事件，并传递数据，最初父组件在事件函数中通过参数接管子组件传递的数据。<br/>案例：<br/><strong>父组件</strong></p><pre><code><script setup lang=“ts”>// 引入vue插件import { ref } from “vue”// 引入子组件import Son from “../components/Son.vue”// 定义传递给子组件的数据const title = ref(“我是子组件”)const msg = ref(’’)// 定义事件函数const handleAdd = (item: any) => { msg.value += item}</script><template> <h1>父组件</h1> <!– 应用子组件 title: 传递给子组件的数据 handleAdd:自定义事件 –> <Son :title=“title” @handleAdd=“handleAdd”></Son> <h3>{{ msg }}</h3></template></code></pre><p></p><p><strong>子组件</strong></p><pre><code><script setup lang=“ts”>// 引入vue 解构 须要的办法import { defineProps, defineEmits } from “vue”// 调用defineProps办法并获取父组件传递的数据// const props = defineProps([’title’])const { title } = defineProps([’title’]) // 能够简写 解构// 调用defineEmits办法 并承受父组件给绑定的事件const emit = defineEmits([‘handleAdd’])const handleTitle = () => { emit(“handleAdd”, ‘我是子组件传递的数据’)}</script><template> <!– 渲染父组件传递的数据 –> <h1 @click=“handleTitle”>{{ title }}</h1></template></code></pre><p><br/>效果图：<br/></p><h3>三、ref()</h3><p>ref()办法 从vue中解构出 <code>ref</code>,而后父组件给dome标签或者子组件标签，增加ref属性，值是曾经定义好的<code>ref</code>空数据的变量名称。<br/>子组件从vue中解构出<code>defineExpose</code>，调用并想外裸露你想要获取的数据/办法<br/>父组件通过从vue中解构生命周期<code>onMounted</code>，调用<code>onMounted</code>生命周期在外面 通过调用ref的数据<code>value</code>获取到 dome标签 或 子组件实例对象。<br/>案例：<br/><strong>父组件</strong></p><pre><code><script setup lang=“ts”>// 引入vue插件import { ref, onMounted } from “vue”// 引入子组件import Ref from “../components/Ref.vue”;// 定义refconst myref = ref()onMounted(() => { console.log(myref.value, ‘’); // ref组件定义的数据 console.log(myref.value.message); // 调用 ref组件中暴露出的办法 myref.value.handleAdd()})</script><template> <h1>父组件</h1> <!– 定义ref –> <Ref ref=“myref”></Ref></template></code></pre><p></p><p><strong>子组件</strong></p><pre><code><script setup lang=“ts”>// 引入vueimport { defineExpose, ref } from “vue”// 定义数据const message = ref(“我是Ref子组件中的数据”)// 定义方法const handleAdd = () => { console.log(‘我是Ref子组件中的办法’);}// 通过 defineExpose 将数据办法裸露进来defineExpose({ message, handleAdd})</script><template> 我是ref办法</template></code></pre><p></p><p>效果图：<br/></p><h3>四、pinia</h3><p>Vuex 和 Pinia 是 Vue 3 中的全局状态管理工具，应用这两个工具能够轻松实现组件通信。</p><p>它们都是全局的、所有组件都能够拜访的、存储数据和办法，用来治理组件中的共享状态的仓库。并且可能在整个组件中进行拜访和批改。让咱们更无效的 组织 和 治理 整个组件的状态，使咱们更轻松的开发简单的、大型数据的前端我的项目。</p><p>同时解决了同步异步对调试工具的影响 和 代码的耦合性 还有组件之间数据通信的凌乱问题。</p><ul><li><p>应用pinia 首先咱们须要先下载安装</p><pre><code> npm install pinia</code></pre></li><li>而后须要在 <code>main.js/ts</code> 中配置<br/></li><li>创立仓库文件夹(stores)，同时定义仓库文件<br/></li><li><p>仓库文件的内容</p><ul><li>导入</li><li>创立仓库</li><li>导出仓库</li></ul><pre><code>// 导入import { defineStore } from “pinia”;import { ref } from “vue”// 创立仓库const tableStore = defineStore(“table”, () => { // 定义数据 let count = ref(0) // 定义方法 const changeCount = () => { // 数量自增 count.value++; } // 返回 数据 和 办法 return { count, changeCount }})// 导出仓库export default tableStore</code></pre></li></ul></article>