Vue3中使用$attrs实现组件之间的通信

昨天呢, 抽出一天的时间, 做了一个Vue3 组件通信的总结, 有props, 自定义事件, mitt, v-model的升级写法, $refs和$parent, provide和inject等等

今天, 我们主要说一下, $attrs是如何做到组件通信的

$attrs可以实现祖孙之间的组件通信

大家可能很好奇, 这个怎么通信呢?

其实, 并不是很难, 我们来实现一下

我们来做一个准备工作, 准备三个嵌套组件

组件准备完成之后, 我们就可以开始我们的祖孙组件传递了

在传递之前, 我们先来给父组件准备一组数据

我们这样的写法, 就是给Son组件传递了三组数据, name是响应式的, a和b都是字符串

上面的写法, 最终会被解析为

所以, 我们在Son组件中什么都不接受, 我们看看还能获取到这些数据吗?

貌似在attrs中, 并且没有了props

所以, 我们接收一个数据, 我们看看变化

怎么接收了, 就会有props, 不接收就会在attrs中, 我们怎么获取到, 没有接收的数据呢?

其实可以通过$attrs可以获取到没有被接收的数据

所以, 我们在子组件中只需要做一件事, 就是什么都不接收, 使用v-bind将所有的数据传递给孙组件

我们使用孙组件进行接收

既然父组件可以将数据传递给孙组件, 那么孙组件可不可以将数据传递给父组件, 那当然是可以的了, 我们只需要使用props的方式, 写一个函数传递过去

然后再孙组件中进行接收

随后, 我们点击传递数据

这样, 我们使用$attrs实现祖孙组件通信就讲解完了

今天讲解的$attrs虽然可以实现组件之间的通信, 但是, 需要借助中间组件进行通信, 对于祖孙组件通信, 还是建议使用provide和inject, 随后的文章会讲解两者的用法

我们下期见

她的码农
酷爱前端开发，酷爱写作，向全栈工程师奋进！
284篇原创内容
公众号
Vue3
13
$attrs
1
Vue组件通信
1
Vue3 · 目录
上一篇
实战教程 || 十分钟快速上手Pinia