Vue封装组件利器之$attrs、$listeners的使用

目录
  • 前言
  • $attrs
  • 例子:
  • $listeners (官网解释)
  • 使用场景
  • 总结

前言

多级组件嵌套需要传递数据时,通常使用的方法是通过vuex。但仅仅是传递数据,不做中间处理,使用 vuex 处理,未免有些大材小用了。所以就有了 $attrs 、 $listeners两个属性 ,通常配合 inheritAttrs 一起使用。

$attrs

从父组件传给自定义子组件的属性,如果没有 prop 接收会自动设置到子组件内部的最外层标签上,如果是 class 和 style 的话,会合并最外层标签的 class 和 style。

如果子组件中不想继承父组件传入的非 prop 属性,可以使用 inheritAttrs 禁用继承,然后通过 v-bind="$attrs" 把外部传入的 非 prop 属性设置给希望的标签上,但是这不会改变 class 和 style。

inheritAttrs 属性 官网链接

2.4.0 新增

类型:boolean

默认值:true

详细:

默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false,这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property $attrs 可以让这些 attribute 生效,且可以通过 v-bind 显性的绑定到非根元素上。

注意:这个选项不影响 class 和 style 绑定。

例子:

父组件

<template>
  <my-input
      required
      placeholder="请输入内容"
      type="text"
      class="theme-dark"
  />
</template>

<script>
import MyInput from './child'
export default {
  name: 'parent',
  components: {
    MyInput
  }
}
</script>

子组件

<template>
  <div>
    <input
        v-bind="$attrs"
        class="form-control"
    />
  </div>
</template>

<script>
export default {
  name: 'MyInput',
  inheritAttrs: false
}
</script>

子组件中没有接受父组件中传过来的值,也没有绑定,但是有v-bind="$attrs"这个属性,他会自动接受并绑定

inheritAttrs: false

inheritAttrs: true

$listeners (官网解释)

listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

先上代码:这里只举例focue、input两个原生事件

// 父组件
<template>
  <my-input
      required
      placeholder
      class="theme-dark"
      @focue="onFocus"
      @input="onInput"
  >
  </my-input>
</template>
<script>
import MyInput from './child'
export default {
  components: {
    MyInput
  },
  methods: {
    onFocus (e) {
      console.log(e.target.value)
    },
    onInput (e) {
      console.log(e.target.value)
    }
  }
}
</script>
// 子组件
<template>
  <div>
    <input
        type="text"
        v-bind="$attrs"
        class="form-control"
        @focus="$emit('focus', $event)"
        @input="$emit('input', $event)"
    />
  </div>
</template>

<script>
export default {
  name: 'MyInput',
  inheritAttrs: false
}
</script>

这样绑定原生事件很麻烦,每一个原生事件都需要绑定,但用v-on="$listeners"就会省事很多

 <input
        type="text"
        v-bind="$attrs"
        class="form-control"
+       v-on="$listeners"
-       @focus="$emit('focus', $event)"
-       @input="$emit('input', $event)"
    />

这样一行代码就能解决绑定所有的原生事件的问题

使用场景

组件传值时使用: 爷爷在父亲组件传递值,父亲组件会通过$attrs获取到不在父亲props里面的所有属性,父亲组件通过在孙子组件上绑定$attrs 和 $listeners 使孙组件获取爷爷传递的值并且可以调用在爷爷那里定义的方法;

对一些UI库进行二次封装时使用:比如element-ui,里面的组件不能满足自己的使用场景的时候,会二次封装,但是又想保留他自己的属性和方法,那么这个时候时候$attrs和$listners是个完美的解决方案。

总结

到此这篇关于Vue封装组件利器之$attrs、$listeners使用的文章就介绍到这了,更多相关Vue封装组件$attrs、$listeners使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue2.4+新增属性.sync、$attrs、$listeners的具体使用

    sync 在vue2.4以前,父组件向子组件传值用props:子组件不能直接更改父组件传入的值,需要通过$emit触发自定义事件,通知父组件改变后的值.比较繁琐,写法如下: //父组件 <template> <div class="parent"> <p>父组件传入子组件的值:{{name}}</p> <fieldset> <legend>子组件</legend> <child :val=&quo

  • Vue组件通信$attrs、$listeners实现原理解析

    前言 vue通信手段有很多种,props/emit.vuex.event bus.provide/inject 等.还有一种通信方式,那就是$attrs和$listeners,之前早就听说这两个api,趁着有空来补补.这种方式挺优雅,使用起来也不赖.下面例子都会通过父.子.孙子,三者的关系来说明使用方式. $attrs 官方解释: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class和style除外).当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定

  • Vue为什么要谨慎使用$attrs与$listeners

    前言 在 Vue 开发过程中,如遇到祖先组件需要传值到孙子组件时,需要在儿子组件接收 props ,然后再传递给孙子组件,通过使用 v-bind="$attrs" 则会带来极大的便利,但同时也会有一些隐患在其中. 隐患 先来看一个例子: 父组件: { template: ` <div> <input type="text" v-model="input" placeholder="please input"&

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

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

  • Vue中$attrs与$listeners的使用教程

    目录 介绍 举例 总结  介绍 $attrs 继承所有的父组件属性(没有通过 props 接收的属性还有 class 类名 和 style 样式 ). inheritAttrs: 是否非 props 属性显示在标签最外层,默认值 true ,就是继承所有的父组件属性(除了 props 特定绑定外)作为普通的HTML特性应用在子组件的根元素上,如果你不希望组件的根元素继承特性就设置 inheritAttrs: false  ,但是 class 还是会继承. $listeners 它是一个对象,能接

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

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

  • Vue封装组件利器之$attrs、$listeners的使用

    目录 前言 $attrs 例子: $listeners (官网解释) 使用场景 总结 前言 多级组件嵌套需要传递数据时,通常使用的方法是通过vuex.但仅仅是传递数据,不做中间处理,使用 vuex 处理,未免有些大材小用了.所以就有了 $attrs . $listeners两个属性 ,通常配合 inheritAttrs 一起使用. $attrs 从父组件传给自定义子组件的属性,如果没有 prop 接收会自动设置到子组件内部的最外层标签上,如果是 class 和 style 的话,会合并最外层标签

  • echarts.js 动态生成多个图表 使用vue封装组件操作

    组件只做了简单的传值处理,记录开发思路及echarts简单使用. 这里默认所有图表样式一致,都为柱状图,如需其他类型,可查阅echarts官网文档,再动态传值即可. vue 使用组件 ------在外层用v-for 循环,传不同值进charts 即可 <!-- 传入对应的数据给子组件 --> <charts :options="item.select" :id='"charts" +index' :index="index" s

  • vue封装组件js版基本步骤

    目录 什么是组件化: Vue组件化思想 一.注册组件的基本步骤 1.创建组件构造器c-input 2.注册组件 3.父组件使用 二.丰富组件 三.父子组件间的通讯 1.父---->子通信 [props Down] 2. 子----> 父传值 [Events Up] 3. 子<----> 父 双向传值 四.slot插槽 什么是插槽? 怎么用插槽? 具名插槽 作用域插槽 什么是组件化: 组件化就是将一个页面拆分成一个个小的功能模块,每个功能模块完成属于自己这部分独立的功能,使得整个页面

  • vue封装组件之上传图片组件

    本文实例为大家分享了vue上传图片组件的封装具体代码,供大家参考,具体内容如下 未上传状态 上传状态 其他状态(查看/删除) 自定义组件文件名称 - 这里叫UploadImg.vue <template> <div> <el-form> <!-- :on-change="uploadFile" --> <el-upload :limit="limit" //最大允许上传个数 action accept="

  • vue封装一个弹幕组件详解

    目录 前言 功能实现 1.获取随机颜色 随机数生成 随机颜色编码生成 2.随机生成弹幕出现的高度坐标 3.格式化弹幕对象 颜色 定位 4.创建弹幕对象 滚动动画定义 创建弹幕dom对象实例 弹幕销毁 弹幕循环 5.实时弹幕发送 html JavaScript 源码地址 前言 现在很多地方都有使用到弹幕,最近在捣鼓自己的个人博客网站,也想着在里面加入一个弹幕模块,所以在这里封装了一个可复用的弹幕组件,目前已经实现了基本的功能,可能还会有存在缺陷,后续会继续优化.这里给大家介绍分享一下实现的过程.

  • 前端框架之封装Vue第三方组件三个技巧

    目录 引言 一.使用第三方组件的属性 二.使用第三方组件的自定义事件 三.使用第三方组件的插槽 四.使用第三方组件的方法 引言 在封装第三方组件中,经常会遇到一个问题,如何通过封装的组件去使用第三方组件的Attributes(属性).Events(自定义事件).Methods(方法).Slots(插槽). 当然这个问题并不是难以解决,用普通方法解决难免陷入繁琐重复的工作中,而且封装的组件代码可读性也不高. 本专栏将介绍三种技巧来使用第三方组件的Attributes(属性).Events(自定义事

  • Vue封装svg-icon组件使用教程

    目录 一.SVG可缩放矢量图形 二.SVG在vue项目中的配置与使用 一.SVG可缩放矢量图形 SVG(Scalable Vector Graphics)可缩放矢量图形,是一种用于描述基于二维的矢量图形的 XML 标记语言,其基本矢量显示对象包括矩形.圆.椭圆.多边形.直线.任意曲线等,还能显示文字对象和嵌入式外部图像(包括 PNG.JPEG.SVG 等).实际项目中大多数图标都是使用的 SVG 图标文件,其主要有以下几个优点: 1.内容可读,文件是纯粹的 XML. 2.图像文件小,可伸缩性强.

  • vue 封装自定义组件之tabal列表编辑单元格组件实例代码

    vue 封装自定义组件 tabal列表编辑单元格组件 <template> <div class="editable-cell"> <div class="editable-cell-input-wrapper" v-if='editable'> <el-input class="editInput" v-model="cellValue" placeholder="请输入内

  • Vue封装的组件全局注册并引用

    当vue接触的多了之后,你可能也会到自己封装组件的程度,试想每个页面的功能级模块全部拆分成组件,然后后续请求后台数据传入进去或者自己模拟数据,是多么方便的一件事情. 每当我们需要修改的时候,只需维护那一个功能性组件即可,不需要这个功能了,只需要从页面中删除这个组件的引用即可. 那么废话不多说了,我们来看看如何全局注册并一键引入(类似于element ui的全部引入). 如何封装组件就不多赘述了. 参考vue官网的做法:vue官网全局注册 1.正则判断路径以及文件名,获取全部组件并全局注册(可以直

随机推荐