首先你完成了如下：
Vite+vue3+Ts+pinia实战（一：初始、根本安装、踩坑）
Vite+vue3+Ts+pinia开辟（二：路由、pinia、UI库安装）
今天就讲讲父子通讯、兄弟通讯，以及ref、reactive的简朴使用吧。
父传子Ref根本的HelloWorle.vue就有就不多说了。
初始目次：
一、在components下建一个组件，我这里叫header吧
// components/Header/index.vue<template> <div五、兄弟通讯
5.1 这里我们盼望顶部组件切换，内容组件可以获取到。而且根据差别的Code做差别的操纵。
修改Header/index.vue，引入onMounted生命周期，以及emit
<script setup lang="ts">import { ref, reactive, onMounted, defineEmits } from 'vue';const tabs = reactive([{ label: "物品查询", code: "item"},{ label: "怪物查询", code: "mon"},{ label: "舆图查询", code: "map"},{ label: "Npc查询", code: "npc"}])const cutTab = ref('');const emit = defineEmits(['tabChange'])onMounted(() => { tabChange(tabs[0]);})const tabChange = (item: any) => { if (item.code == cutTab.value) { return } cutTab.value = item.code; emit('tabChange', cutTab.value)}</script>5.2 从上面我可以看到他初始化了切换到第一个页签了，而且把当前的code导出去了。
下面我就修改我们的app.vue用于接收它
<template> <Header @tabChange="tabChange" /> <Content /></template><script setup lang="ts">import Header from './components/Header/index.vue';import Content from './components/Content/index.vue';const tabChange = (v: any) => { console.log(v)}</script><style scoped></style>5.3 到这里，我们仅是父组件知道了header的变革。下面怎么告诉Content组件呢？
实在这时间是有2种方法，第一是将code传给Content，Content去监听这个值的变革做对应的处。
方法2就是直接调用Content的方法进行操纵。由于是教程，我这里就演示第2种。
修改Content/index.vue
<script setup lang="ts">import { ref } from 'vue';let cutTab = ref("");// 接收到参数后进行你想要的处理惩罚const tabChange = (code: string) => { console.log("content：" + code); cutTab.value = code;}// 导出这个方法defineExpose({ tabChange})</script><style scoped lang="scss">修改App.vue
<template> <Header @tabChange="tabChange" /> <Content ref="RefContent" /></template><script setup lang="ts">// 1.0 引入refimport { ref } from 'vue'import Header from './components/Header/index.vue';import Content from './components/Content/index.vue';// 2.0 要使用子组件就要界说一个变量跟你上面界说的一样的refconst RefContent: any = ref(null);const tabChange = (v: any) => { // console.log(RefContent) RefContent.value.tabChange(v);}</script>看结果：
结语：
今天这一篇，学习了兄弟通讯，A组件 通过 defineEmits（2.0的$emit）导出方法。B组件通过 defineExpose 将它自身的方法袒暴露来供 父组件（Ref） 调用，来到达父子通讯、兄弟通讯。
我们还了解了生命周期，以及ref、reactive的开端使用。 |
