vue中通过使用$attrs实现组件之间的数据传递功能

组件之间传递数据的方式有很多种，之所以有这么多种方式，是为了满足在不同场景不同条件下的使用。

一般有三种方式：

props
vuex
Vue Event Bus

本文介绍的是使用$attrs的方式。

这是$attrs的官网api https://cn.vuejs.org/v2/api/#vm-attrs

这个api是在2.4版本中添加的，那么为什么要添加这个特性呢？
看看官网是怎么解释的

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class  和  style  除外)。

当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class  和  style  除外)，

并且可以通过  v-bind="$attrs"  传入内部组件——在创建高级别的组件时非常有用。

第一次看的话真是不容易看懂，这里是既包含用法又隐晦的说明了为什么使用，还是我来解释一下吧。

意思就是： $attrs 可以收集父组件中的所有传过来的属性除了那些在组件中没有通过  props 定义的。

引申说明一下，如果组件的嵌套层级有点深但又不那么深，比如三层。

我们如果使用props的话，最里面的组件想要获取最外层组件的数据，就要通过中间的组件的props来传递，

但是这个props对于中间的这个组件没啥用处，它就是做了一个桥梁而已。我们平时写代码时候其实经常碰到

这种场景，写起来有时候觉得挺烦的。所以就有了这个$attrs来帮助我们，不必在中间组件中写props就可以让

最里面的组件拿到最外面组件传进来的数据。

那么，具体怎么使用呢？

看看下面的代码吧，很简单就懂了

准备三个组件

里面的代码如下

//grandfather
<template>
 <div style="background: blue">
  father in grandfather
  <father :father-age="50" :child-time="`${time}`"></father>
 </div>
</template>
<script>
import father from './father'
export default {
 components: {
  father
 },
 data () {
  return {
   time: new Date().getTime()
  }
 }
}
</script>

//father
<template>
 <div style="background: red">
  child in father
  <div>
   <span>father age:</span>{{fatherAge}}
  </div>
  <child v-bind="$attrs"></child>
 </div>
</template>
<script>
import child from './child'
export default {
 components: {
  child
 },
 props: {
  fatherAge: {
   type: Number,
   default: 0
  }
 }
}
</script>

//child<template>
 <div style="background: green">
  <div>child</div>
  <div>time: {{childTime}}</div>
 </div>
</template>
<script>
export default {
 props: {
  childTime: {
   type: String,
   default: ''
  }
 }
}
</script>

需要从爷爷组件直接传给子组件的数据，不要在父组件中的props中声明。

在子组件上通过v-bind的方式就可以把父组件中未声明而子组件需要从爷爷组件中获取的数据传给子组件。

当然，子组件props肯定是要声明的，还是props的用法啦。

总结

以上所述是小编给大家介绍的vue中通过使用$attrs实现组件之间的数据传递功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)

    当我们在书写 vue 组件的时候,也许可能会用到数据传递:将父组件的数据传递给子组件,有时候也需要通过子组件去事件去触发父组件的事件: 每当我们遇到这样的需求的时候,我们总是会想到有三种解决办法: 通过 props 的方式向子组件传递(父子组件) vuex 进行状态管理(父子组件和非父子组件) vuex 非父子组件的通信传递 Vue Event Bus ,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递. 后来再逛社区的时候我又发现了还有第四种传递方式, inheritAttrs +

  • Vue 单文件中的数据传递示例

    Vue 的单文件组件在使用 Vue 时非常常用,所以我们也会经常遇到组件之间需要传递数据的时候,大致分为三种情况: 父组件向子组件传递数据,通过 props 传递数据. 子组件向父组件传递数据,通过 events 传递数据. 两个同级组件之间传递数据,通过 event bus 传递数据. 文档中也已经详细的说明了各种情况下的解决方法,但是现在我在还没有阅读多少文档的情况下,没有找到有单文件组件方面的具体书写方式,智商和理解能力有限的情况下,自己尝试了一下,最后发现其实是一样的.所以这篇文章其实是

  • vue父子组件的数据传递示例

    vue父子组件的数据传递示例

    1.父组件向子组件传递数据 <div id="box"> <aaa></aaa> </div> <template id="aaa"> <h1>模板aaa=>{{msg1}}</h1> //msg1写在这里是可以的,因为这是父组件内部 //<bbb>{{msg1}}</bbb> //这种写法是不可以的,这是在子组件内部,要在这里显示父组件的数 //据,需

  • Vue表单类的父子组件数据传递示例

    使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面. 在这里记录一下我平时常用的处理方式,这篇文章主要记录父子组件间的数据传递,非父子组件主要通过Vuex处理,这篇文章暂时不作说明. 与文档里给的方案一样,父组件向子组件传递数据主要通过 props,子组件向父组件传递数据主要通过触发器 $emit(),只是在用法上会有些不同. 1.传递基本类型数据 当子

  • vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法

    vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法

    上一篇文章介绍了vuejs实现的简单分页,如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件. 首先使用基础 Vue 构造器,创建一个"子类",Vue.extend( options ) var barHtml = '<div class="page-bar">'+ '<ul>'+ '<li v-if="cur>1"><a v-on:click=&

  • Vue v2.4中新增的$attrs及$listeners属性使用教程

    Vue v2.4中新增的$attrs及$listeners属性使用教程

    前言 多级组件嵌套需要传递数据时,通常使用的方法是通过vuex.如果仅仅是传递数据,而不做中间处理,使用 vuex 处理,未免有点杀鸡用牛刀.Vue 2.4 版本提供了另一种方法,使用 v-bind="$attrs", 将父组件中不被认为 props特性绑定的属性传入子组件中,通常配合 interitAttrs 选项一起使用.之所以要提到这两个属性,是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的情况下变得简洁,业务清晰. 首先分析以下应用场景: A 组件与 B

  • Vue.js实战之组件之间的数据传递

    Vue.js实战之组件之间的数据传递

    前言 Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,components 文件夹下都是子组件. 一.父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组件获取 logo 的值,就需要使用 props: [

  • vue中通过使用$attrs实现组件之间的数据传递功能

    组件之间传递数据的方式有很多种,之所以有这么多种方式,是为了满足在不同场景不同条件下的使用. 一般有三种方式: props vuex Vue Event Bus 本文介绍的是使用$attrs的方式. 这是$attrs的官网api https://cn.vuejs.org/v2/api/#vm-attrs 这个api是在2.4版本中添加的,那么为什么要添加这个特性呢? 看看官网是怎么解释的 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class  和  style  除外

  • vue祖孙组件之间的数据传递案例

    vue祖孙组件之间的数据传递案例

    **解决的问题:** 使用$attrs和$listeners实现祖孙组件之间的数据传递,也就是多重嵌套组件之间的数据传递. **注意:** 本方法针对vue2.4版本及以上,使用$attrs和$listeners来实现的 **解决方案:** **首先创建父组件:** 父组件用于动态数据的绑定与事件的定义 <template> <div> <!--这里 :one和:two是向后代组件传递数据--> <child1 :one="child1" :t

  • vue组件之间的数据传递方法详解

    (1)props属性: 在父组件中,可以通过子组件标签属性的形式将数据或者函数传给子组件,子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件: 一般的属性值都是用来给子组件展示的 子组件传数据给父组件 属性值为函数类型的,一般是用来子组件向父组件传递数据,子组件通过调用父组件传过来的函数,可以修改父组件的状态数据 缺点: 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) 注意: //子组件获取父组件传过来的值 props: { obj: {//o

  • vue中使用elementui实现树组件tree右键增删改功能

    vue中使用elementui实现树组件tree右键增删改功能

    功能描述: 1.右击节点可进行增删改 2.可对节点数据进行模糊查询 3.右击第一级节点可以进行同级节点增加 4.双击节点或点击修改节点 都可以对节点获取焦点并进行修改,回车修改成功 5.可对节点进行拖拽,实现节点移动功能 效果图: 完整代码: <template> <div class="lalala tree-container"> <el-input placeholder="输入关键字进行过滤" v-model="fil

  • vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这个前面的文章中有提到,需要的可以去翻阅. 整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上 首先新需要在项

  • 详解Vue中$props、$attrs和$listeners的使用方法

    目录 背景 一.文档描述 二.具体使用 三.总结 背景 现在我们来讨论一种情况,父组件与孙子组件怎么通信,我们有多少种解决方案? 我们使用VueX来进行数据管理,但是如果项目中多个组件共享状态比较少,项目比较小,并且全局状态比较少,那使用VueX来实现该功能,并没有发挥出VueX的威力. 使用B来做中转站,当A组件需要把信息传给C组件时,B接受A组件的信息,然后利用属性传给C组件, 这是一种解决方案,但是如果嵌套的组件过多,会导致代码繁琐,代码维护比较困难;如果C中状态的改变需要传递给A, 使用

  • 解决vue中无法动态修改jqgrid组件 url地址的问题

    在项目开发中使用封装的jqgrid组件时需要动态修改URL地址,直接修改URL地址jqgrid请求的url地址并不会改变,这时我们可以强行修改jqgrid的url地址,修改如下: $("#accountGrid").setGridParam( //G,P要大写 { url:UrlService.url('www/1') } ) .trigger("reloadGrid"); 以上这篇解决vue中无法动态修改jqgrid组件 url地址的问题就是小编分享给大家的全部内

  • 在vue中封装可复用的组件方法

    本次封装的组件以toast组件为例 以前使用移动端ui插件时,通过一句代码比如 $.toast( ' 需要显示的内容 ' ),从而在页面上展示这段文字,并在一定时间后消失. 现在我们也尝试自己封装toast组件. 准备工作:vue-cli脚手架工程 先看一下涉及到的文件目录截图: 这次的封装主要涉及的文件是Toast.vue toast.js Hello.vue,主要思路如下: ① Toast.vue是我们要使用的toast组件: ② toast.js里面用Vue.extend()扩展一个组件构

  • vue中的面包屑导航组件实例代码

    vue的面包屑导航组件 用来将其放到navbar中: Breadcrumb/index.vue <template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.pat

随机推荐