脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue $attrs组件传递数据

Vue使用$attrs实现爷爷直接向孙组件传递数据

 更新时间：2024年02月20日 17:05:25   作者：二饼_biu  
这篇文章主要为大家详细介绍了Vue如何使用$attrs实现爷爷直接向孙组件传递数据,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下

前言

最近在重读vue3文档，读到"#Class与Style绑定"这一章节时突然发现，通过$attrs可以直接实现爷爷组件向孙子组件传递数据。

不考虑注入依赖provide/inject和vuex的情况下，父子组件传递数据时最常用的是props，遇到爷传孙的情况，会先爷传父再父传子，可以完成需求但总有点那啥，使用$attrs就可以直接实现爷传孙，毕竟少写一行代码是一行啊。

实现

具体实现（以vue3为例）：

<--爷组件-->
<script setup>
import { ref } from 'vue';
import Father from './components/Father.vue'
const fatherStr = ref('这是爸爸的数据')
const childStr = ref('这是孙子的数据')
</script>
<template>
  <Father :fatherStr="fatherStr" :childStr='childStr'></Father>
</template>

爷组件向父组件和孙组件各传递了数据，父组件代码如下：

<--父组件-->
<script setup>
import Child from './child.vue'
</script>
<template>
  <div>
    <p >father</p>
    <p>{{ $attrs.fatherStr }}</p>
    <Child v-bind="$attrs"></Child>
  </div>
</template>

孙组件代码如下：

<--孙组件-->
<script setup>
</script>
<template>
  <div>
    <p >child</p>
    <p>{{ $attrs.childStr }}</p>
  </div>
</template>

最后页面实现效果如下：

优化

虽然实现了，但是通过阅读Vue文档可以发现，他并不是响应式的。

对于不需要经常变动的数据应该是够用了，但是如果是响应式的数据，可能会有问题，所以做了以下优化。 爷组件不变，父组件和孙组件代码分别如下。

<--父组件-->
<script setup>
import Child from './child.vue'
const props = defineProps(['fatherStr'])
</script>

<template>
  <div>
    <p >father</p>
    <p>{{ fatherStr }}</p>
    <Child v-bind="$attrs"></Child>
  </div>
</template>

<style scoped>
</style>

<--孙组件-->
<script setup>
const props = defineProps(['childStr'])
</script>

<template>
  <div>
    <p >child</p>
    <p>{{ childStr }}</p>
  </div>
</template>

<style scoped>
</style>

效果还是一样的：

到此这篇关于Vue使用$attrs实现爷爷直接向孙组件传递数据的文章就介绍到这了,更多相关Vue $attrs组件传递数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue3 setup添加name的方法步骤

    Vue3 setup添加name的方法步骤

    如果你在 vue3 开发中使用了语法的话,对于组件的name属性,需要做一番额外的处理,下面这篇文章主要给大家介绍了关于Vue3 setup添加name的相关资料,需要的朋友可以参考下
    2022-11-11
  • Vue3结合TypeScript项目开发实战记录

    Vue3结合TypeScript项目开发实战记录

    听说有的公司已经开始用vue3了 赶紧打开B站学一下,下面这篇文章主要给大家介绍了关于Vue3结合TypeScript项目开发实战的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-09-09
  • vue文件运行的方法教学

    vue文件运行的方法教学

    在本篇文章里小编给大家分享了关于vue文件运行的方法教学内容，有需要的朋友们跟着学习下。
    2019-02-02
  • Vue.js系列之项目结构说明(2)

    Vue.js系列之项目结构说明(2)

    这篇文章主要介绍了Vue.js系列之项目结构说明(2)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-01-01
  • 解决vue的 v-for 循环中图片加载路径问题

    解决vue的 v-for 循环中图片加载路径问题

    今天小编就为大家分享一篇解决vue的 v-for 循环中图片加载路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 使用Vue-Router 2实现路由功能实例详解

    使用Vue-Router 2实现路由功能实例详解

    vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能,需要的朋友可以参考下
    2017-11-11
  • vue使用wavesurfer.js解决音频可视化播放问题

    vue使用wavesurfer.js解决音频可视化播放问题

    Wavesurfer.js是一款基于HTML5 canvas和Web Audio的声纹可视化插件，功能十分强大，在Vue框架中嵌入使用该插件，今天重点给大家介绍下vue使用wavesurfer.js解决音频可视化播放问题，感兴趣的朋友一起看看吧
    2022-04-04
  • Vue搭建后台系统需要注意的问题

    Vue搭建后台系统需要注意的问题

    这篇文章主要介绍了Vue搭建后台系统需要做的几点，文中给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • Vue页面中播放音频文件的方法详解

    Vue页面中播放音频文件的方法详解

    这篇文章主要为大家详细介绍了Vue实现页面中播放音频文件的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-02-02
  • vue 如何打开接口返回的HTML文件

    vue 如何打开接口返回的HTML文件

    本文主要介绍了vue 如何打开接口返回的HTML文件，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01

最新评论