vue父子组件传值记录

之前父子组件传值不太熟悉，组件间传值要么用 vuex，要么用 sessionStorage 缓存，但是 sessionStorage 感觉用多了不太好，缓存太多容易混淆，vuex 还是比较好用，，但是用的过程中好像有个问题，记不得了，下次遇到再说
这次写自己的网站项目时因为页面有很多表格，加上布局什么的基本差不多，所以就想用公共组件，有区别的地方就是用 slot 插槽

不知道咋说，懒得写案例了，直接拿我这个页面说一下：

首先我是先创建了一个叫 totalTableSort.vue 的文件，这个文件作为公共组件，也算是子组件，写后面引入时相同的地方

在父组件使用时直接 import 引入注册组件后使用即可

父组件向子组件传值

在父组件使用<TotalTableSort></TotalTableSort>时，上面写的:porpsPageTitle和后面其他的就是要从父组件传递向子组件的值，例如:porpsPageTitle就是我要传递的本页面的标题名
此时父组件传值就完成了，接下来在子组件使用

如下，props 与 data 同级，在 props 里面直接写上即可，我这里是在 data 里面重新赋值了一下，使用时就是模板语法直接用 data 里的 pageTitle 即可，如果不进行重新赋值到 data 直接使用 propsPageTitle 也是可以的，因为 props 里的是传递下来的，不可以重新改变这个值，所以习惯重新在 data 里面写一下

<h3 class="pageTitle">{{ pageTitle }}</h3>

data() {
 return {
    pageTitle: this.propsPageTitle,
  };
},
props: {
  propsPageTitle: "", //页面标题
},

其他情况

大部分时候需要传递从其他地方请求来的数值，又因为这个传值时异步进行的，有时候数值还没请求到值就传过去了，如果在子页面的 mounted 里面给 data 里的变量赋值，例如我要写this.showDataList=this.porpsShowDataList，本意是想让传过来的“显示的列表”赋给子页面的 showDataList，但是这时因为值还没有请求到，然后就给 showDataList 赋了个空值，导致数据请求来之后也不能重新给页面数据渲染上

有人可能说那直接拿 propsShowDataList 用不就行了，也不是不可以，但是如果需要更改 showDataList 的话就没有办法了，因为我这里是使用 showDataList 控制显示的数据，需要经常变化，所以自然是不行

解决办法：
这时可以使用 vue 里的 watch 进行监听 propsShowDataList 值的变化，因为 vue 是响应式的，在父组件请求数据完成后传递的请求的值就会跟着变化，此时坚挺到 propsShowDataList 的变化就可以给 showDataList 重新赋值渲染，如下，监听哪个值前面就写哪个值，newData 是新监听到变化后得值，oldData 是之前的值

watch: {
  propsShowDataList(newData, oldData) {
    console.log("监听显示列表", newData, oldData);
    this.showDataList = newData;
  },
},

子组件向父组件传值

2022/3/25 用到子组件调父组件方法了，顺便来写一下

使用$emit调用父组件传参，可以在父组件直接使用

这里我有一个导入数据的按钮，是在标题头上，因为页面标题这个玩意我这里很多页面除了内容不一样，样式排版什么都一样，所以就写在子组件上了，数据就在父组件获取，然后使用上面的父组件向子组件传值获取，这个时候点击导入数据之后，把文件数据写入数据库需要再调用一次父组件的getData()方法
这里可以在写入成功后使用$emit去调用父组件方法，$emit后面有两个参数，第一个是随便取一个方法名，例如我这里写的是parGetData意为父组件得 getData 方法
![使用KaTeX parse error: Expected 'EOF', got '#' at position 78: …959ffb5f182.png#̲pic_center) 然后在…emit`的第二个参数是调用父组件方法时传入的值，这里将上面的改一下
调用时改成这样

绑定的不变依然是`@parGetData=“getData”`

在父组件的 getData()方法接收一个参数，我这里用 val 表示，然后打印一下 val

完事子组件调用时，就会将后面写的要传入的参数传到父组件的 getData 去，在 getData 可以操作这个传来的值，这就是子组件向父组件传值

好像之前还看到过比较离谱的更深层的传值（祖父或者曾祖父级别的传值），回头遇到再写

❀❀❀❀❀❀ 完结散花 ❀❀❀❀❀❀

Written ❤️ sywdebug.