Vite+vue3+Ts+pinia开发（三：父子通讯、兄弟通讯、数组清空、ref、reactive的使用）

首先你完成了如下：
Vite+vue3+Ts+pinia实战（一：初始、基础安装、踩坑）
Vite+vue3+Ts+pinia开发（二：路由、pinia、UI库安装）

今天就讲讲父子通讯、兄弟通讯，以及ref、reactive的简单使用吧。
父传子Ref基础的HelloWorle.vue就有就不多说了。

初始目录：

image.png

一、在components下建一个组件，我这里叫header吧

// components/Header/index.vue

从上面可以看到，Vue 3.0和2.0开发的不同。
3.0支持从上到下一路开发。或者说分段式开发。而不再像2.0需要先定义data什么的，然后再methods里写方法。
3.0其实也是有自己的生命周期的，如有需要可以使用。

beforeCreate ===>setup()
created =======>setup()
beforeMount ===> onBeforeMount
mounted=======> onMounted
beforeUpdate ===> onBeforeUpdate
updated =======> onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted=====> onUnmounted

Demo.vue代码：

二 ref、reactive的使用

这里说下大概意思吧，定义字符串、布尔、数字类型用ref，定义对象、数组、数组对象用reactive
使用说明：
· ref定义的数据：操作数据需要.value，读取数据时模版中直接读取不需要.value
· reactive定义的数据：操作数据与读取数据：均不需要.value

let num = ref(0)
let string = ref('测试')
let loading = ref(false);
let user = reactive({
  name:"zs",
  age:18
})
// 使用场景
const changeValue = ()=>{
  num.value = 1;
  string.value = '新值';
  loading.value = true;
  user.age = 19
}
// 这里需要注意的是，如果定义的是数组，要清空或者说重新赋值场景如下
let tableData = reactive([]);
const getList = () => {
  axios....(res => {
    tableData.length = 0;
    Object.assign(tableData, res.data.data.list);
  })
  
}

三、回归正题，新建一个兄弟组件，Content

// components/Content/index.vue



    

四、 修改App.vue 并且引入该组件

下面看我们看效果

GIF.gif

五、兄弟通讯

5.1 这里我们希望顶部组件切换，内容组件可以获取到。并且根据不同的Code做不同的操作。

修改Header/index.vue，引入onMounted生命周期，以及emit

5.2 从上面我可以看到他初始化了切换到第一个页签了，并且把当前的code导出去了。

下面我就修改我们的app.vue用于接收它

5.3 到这里，我们仅是父组件知道了header的变化。下面怎么告诉Content组件呢？

其实这时候是有2种方法，第一是将code传给Content，Content去监听这个值的变化做对应的处。
方法2就是直接调用Content的方法进行操作。由于是教程，我这里就演示第2种。
修改Content/index.vue