vue 修改 $attrs

2024-11-04

16. Vue2.4+新增属性$attrs

vm.$attrs简介首先我们来看下vue官方对vm.$attrs的介绍: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外).当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件--在创建更高层次的组件时非常有用. 场景 vue中一个比较令人烦恼的事情是属性只能从父组件传递给子组件.这也就意味着当你想向嵌套层级比较深

vue踩坑记录:[Vue warn]: $attrs is readonly.

今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果.网上搜了一圈后,发现是使用的vue与vue-tempalte-compiler的版本不一致造成的.当时使用的vue是最新版本2.6.10,而vue-template-compiler版本是2.5.21. **解决方法:** 降低vue的版本至2.5.21. `npm uninstall vue`

【vue】[Vue warn]: $attrs is readonly. 只读

[Vue warn]: $attrs is readonly. 这个问题出现时,我自己都很懵逼,明明是在 data 内声明了一个 state ,我在页面渲染完成后去改变它,但是一改变就报错,而且是我在多组件的使用下才会报错,如果页面内没有引入组件就不会报错.索信之下,我就打了个断点调试了下问题,结果发现下图: 这里使用的不是同一个 vue 源,仔细一看我下面有一个用 cdn 加载的 vue 源.并且我的 webpack也有一个源. 导致了调用的时候不是同一个 vue. 后面我找到 cdn 的

vue中$attrs和$listeners以及inheritAttrs的用法

官方文档说明: 一.解释:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外). 意思就是父组件往子组件传没有在props里声明过的值时,子组件可以通过$attrs接受,且只包含父组件没有在props里声明的值. 父组件 <template> <div class="home"> <child gender="male" age="18"/> </div&

Vue 中 $attrs 的使用

名词解释: $attrs--继承所有的父组件属性(除了prop传递的属性.class 和 style ) inheritAttrs:默认值true,继承所有的父组件属性(除props的特定绑定)作为普通的HTML特性应用在子组件的根元素上,如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承主要用途用在父组件传递数据给子组件或者孙组件 <body> <div id="app" class="demo&quo

【vue】$attrs的作用和使用方法

之前一直不了解$attrs的作用和使用场景,然后自己翻阅了相关资料整理了下,如有不对的地方请大家指教 $attrs: $attrs是vue版本2.40以上新增的属性: 使用场景: vue项目里面,大家肯定遇到过组件之间的传值问题,父传子.子传父.非父子之间传值等等: 假如说我们碰到一个多层组件之间的传值,可以用$emit.$on可以解决这个问题,但是操作太过于繁琐了,或者使用vuex也可以去实现,但是有点大材小用杀鸡用了宰牛刀. 然后 $attrs 就是用来解决这个问题的! 官方解释: $

vue vm.$attrs 使用

1.vm.$attrs 说明 https://cn.vuejs.org/v2/api/#vm-attrs 将父组件的属性(除去在props中传入的属性)传递给子组件. 2.代码分析以下是element-ui input源码 <input :tabindex="tabindex" v-if="type !== 'textarea'" class="el-input__inner" v-bind="$attrs" :typ

Vue.js 源码分析(二十一) 指令篇 v-pre指令详解

该指令会跳过所在元素和它的子元素的编译过程,也就是把这个节点及其子节点当作一个静态节点来处理,例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/

React中组件间通信的方式

React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组件的通信,所谓单向数据流,就是数据只能通过props由父组件流向子组件,而子组件并不能通过修改props传过来的数据修改父组件的相应状态,所有的props都使得其父子props之间形成了一个单向下行绑定,父级props的更新会向下流动到子组件中,但是反过来则不行,这样会防止从子组件意外改变父级组件的

想知道Vue3与Vue2的区别?五千字教程助你快速上手Vue3!

从Vue3发布以来,我就一直对其非常感兴趣,就一直想着将其投入公司的生产中,但是开始考虑到很多不确定性就暂时对一些很小的功能进行一些尝试:慢慢的发现组合式Api的形式非常适合开发(个人感觉),尤其是Vue3.2推出了setup语法糖后直呼真香.后面公司的新项目几乎全部采用了Vue3了.使用Vue3开发也将近大半年了,所以写了这篇文章对Vue2和Vue3做了一个对比总结,一是为了对这段时间使用Vue3开发做些记录,二是为了帮助更多的小伙伴更快的上手Vue3. 本篇文章主要采用选项式Api,组合式A

盘点Vue2和Vue3的10种组件通信方式(值得收藏)

Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异:本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式.其中将要实现的通信方式如下表所示方式 Vue2 Vue3 父传子 props props 子传父 $emit emits 父传子 $attrs attrs 子传父 $listeners 无(合并到 attrs方式) 父传子 provide provide 子传父 inject inject 子组件访问父组件 $pa

【Vue】中 $attrs 中的使用方法

vue官网是这样介绍的: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外).当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用. <div id="app"> A{{msg}} <my-button :msg="msg"><

vue的props和$attrs

过去我们在vue的父子组件传值的时候,我们先需要的子组件上用props注册一些属性: <template> <div> props:{{name}},{{age}} 或者 {{$props['name']}},{{$props['age']}} </div> </template> export default{ props: ['name','age'] } 然后父组件调用的时候当属性来传值 <child name="rick"

vue inheritAttrs、$attrs和$listeners使用

inheritAttrs.$attrs和$listeners使用场景: 组件传值,尤其是祖孙组件有跨度的传值. (1)inheritAttrs 属性说明:https://cn.vuejs.org/v2/api/#inheritAttrs 说明比较晦涩. 组件传值一般是通过props传值的.inheritAttrs默认值为true,true的意思是将父组件中除了props外的属性添加到子组件的根节点上(说明,即使设置为true,子组件仍然可以通过$attr获取到props意外的属性).示例代码:

如何写好一个vue组件,老夫的一年经验全在这了【转】 v-bind="$attrs" 和 v-on="$listeners"

如何写好一个vue组件,老夫的一年经验全在这了一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能 Vue 组件的 API 来自三部分——prop.事件和插槽: prop 允许外部环境传递数据给组件 event 允许从组件内触发外部环境的副作用 slot 允许外部环境将额外的内容组合在组件中 prop 组件具有自身状态,当没有相关 porps 传入时,使用自身状态完成渲染和交互逻辑:当该组件被调用时,如果有相关 props 传入,那么将会交出控制权,由父组件控制其行为仅

vue组件之间的传值——中央事件总线与跨组件之间的通信（$attrs、$listeners）

vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是当项目比较大,功能比较复杂的时候,就会变得比较冗余,代码不利于维护:这时候可能会有很多人使用到vuex,但是如果项目中多个组件共享状态比较少,项目比较小,并且全局状态比较少,好像就没有使用vuex来管理数据的必要. 一.中央事件总线(eventBus) 主要是通过在要相互通信的兄弟组件之中,都注册引

Vue - 组件通信之$attrs、$listeners

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

vue 组件传值$attrs $listeners $bus provide/inject $parent/$children

$attrs 包含了父作用域中不作为prop被识别的特性绑定,当一个组件没有声明props时,这里会包含所有父作用域的绑定, $listeneers 包含了父作用域中的v-on事件监听器,它可以通过v-on='$listeners'传入内部组件: demo: parent: <template> <div><h1>this is test tempalte</h1> <child :msg='message' msg1='msg11' msg2='ms

vue中的$attrs属性和inheritAttrs属性

一.vue中,默认情况下,调用组件时,传入一些没有在props中定义的属性,会把这些“非法”属性渲染在组件的根元素上(有一些属性除外),而这些“非法”的属性会记录在$attrs属性上. 二.如何控制不把这些非法的属性渲染在组件的根元素上呢?答案是在组件内部设置inheritAttrs:false即可. 三.通过v-bind="$attrs"可以把“非法”的属性渲染到指定的组件某个元素上. 四.如下图

vue组件通信（props,$emit,$attrs,$listeners）

朝颜陌 vue基础----组件通信(props,$emit,$attrs,$listeners) 一.父传子,子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据. 2>在子组件中通过props声明希望用到的数据 1 <body> 2 <div id="app"> 3 <my-father :msg1="msg" a="10" :b="20" @click1

vue基础----组件通信（props,$emit,$attrs,$listeners）

一.父传子,子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据. 2>在子组件中通过props声明希望用到的数据 <body> <div id="app"> <my-father :msg1="msg" a="10" :b="20" @click1="fn"></my-father> </div> <sc

vue 修改 $attrs

热门专题