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

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

vue inheritAttrs、$attrs和$listeners使用

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

vue2 inheritAttrs、attrs和attrs和listeners使用

inheritAttrs.attrs和attrs和listeners使用场景: 组件传值,尤其是祖孙组件有跨度的传值. (1)inheritAttrs 属性说明:https://cn.vuejs.org/v2/api/#inheritAttrs 说明比较晦涩. 组件传值一般是通过props传值的.inheritAttrs默认值为true,true的意思是将父组件中除了props外的属性添加到子组件的根节点上(说明,即使设置为true,子组件仍然可以通过$attr获取到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中的$props、$attrs和$listeners研究 [包装iview组件]

$props:当前组件接收到的 props 对象.Vue 实例代理了对其 props 对象属性的访问. $attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外). $listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器.它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用. v-bind="$attrs"v-on=&quo…

vue组件传值之$attrs、$listeners

当有父组件A,子组件B,孙子组件C的时候 A-B B-C 的传值想必大家应该都非常熟悉了,通过props和$emit和$on来进行传值那么A-C之间的传值要怎么做呢? 1.event.bus总线传值 2.vuex 但是在项目不是很庞大,很复杂的时候使用vuex传值显得有点大材小用了那要怎么做呢?下面就是我们要说的$attrs和$listeners,注意$attrs的类型为{ [key: string]: string } $listeners的类型为{ [key: string]: Fu…

Vue组件传值（三）之深层嵌套组件传值 - $attrs 和 $listeners

$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外).当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件--在创建高级别的组件时非常有用. $listener 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器.它可以通过 v-on="$listeners" 传入内部…

vue3中$attrs的变化与inheritAttrs的使用

在vue3中的$attrs的变化 $listeners已被删除合并到$attrs中. $attrs现在包括class和style属性. 也就是说在vue3中$listeners不存在了.vue2中$listeners是单独存在的. 在vue3 $attrs包括class和style属性, vue2中 $attrs 不包含class和style属性. 在vue2中的$attrs 在Vue 2中,attrs里面包含着上层组件传递的所有数据(除style和class) 当一个组件声明了prop时候,a…

关于 vue2.x 的 $attrs 和 $listeners

$attrs $attrs 用于多层次组件传递参数(组件标签的attribute,class和style除外),爷爷辈组件向孙子辈组件传递参数(注:参数不能被父辈prop识别,一旦被父辈prop识别且获取,则孙子辈组件不能获取到该参数) 写法如下:(注:v-bind不能用简写 :) <grand-son v-bind="$attrs" /> 下面举个栗子: 爷爷(GrandFather)向父亲(Father)传递一个 msg1 向孙子(GrandSon)传递一个 msg2,…

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表单标签和组件的基本用法，父子组件间的通信

vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"&…

vue条件语句v-if、v-else、v-else-if用法

vue条件语句v-if.v-else.v-else-if用法 v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块.相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换.一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销.因此,如果需要非常频繁地切换,则使…

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中使用less

最近使用vue2.0重构项目, 使用vue-cli脚手架构建, 采用webpack模板, 要在项目中使用less进行样式的编写首先, 打开终端, 在当前项目目录下安装less npm install less less-loader —save 安装成功后,修改webpack.base.conf.js文件, 添加以下代码在vue文件的style标签上加上 lang=“less”, 这样就可以使用less来编写样式了 <style lang="less"></sty…

Vue中的$set的使用

在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.如下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue $set</title> <scri…

mockjs在vue中的使用

mockjs在vue中的使用安装好vue-cli后加载模块: npm install mockjs 创建mock.js文件到src目录下的任一合适文件内新建mockjs.js,设置好拦截信息,设置规则可看官网规则例如下面是模拟的一条数据: import Mock from 'mockjs' export default Mock.mock('msg', { 'name' : '@name', 'age|1-100': 100, 'color' :…

Vue.Draggable/SortableJS 的排序功能，在VUE中的使用

此插件git: https://github.com/SortableJS/Vue.Draggable 基于Sortable.js http://www.cnblogs.com/xiangsj/p/6628003.html 使用方法: 一. 下载包:cnpm install vuedraggable -S (后加-S 保存配置到package.json) 二. 使用: 引入依赖,注册组件 import draggable from 'vuedraggable' ... export defa…

mescroll在vue中的应用

1.npm install --save mescroll.js 2. <template> <div>  <mescroll-vue ref="mescroll0" v-show="tabType==0" :down="getMescrollDown(0)" :up="getMescrollUp(0)" @init="mescrollInit0"…

基于iscroll的better-scroll在vue中的使用

什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等. better-scroll 的滚动原理不少同学可能用过 better-scroll,我收到反馈最多的问题是: 我的 better-scroll 初始化了, 但是没法滚动. 不能滚动是现象,我们得搞清楚这其中的根本原因.在这之前,我…

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…

ckeditor5富文本编辑器在vue中的使用

安装依赖: npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic 要创建编辑器实例,必须首先将编辑器构建和组件模块导入应用程序的根文件中(例如,main.js在由Vue CLI生成时).然后,使用以下Vue.use()方法启用组件: import Vue from 'vue'; import CKEditor from '@ckeditor/ckeditor5-vue'; Vue.use( CKE…

better-scroll在vue中的应用

在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 微信 —> 钱包—>滴滴出行”体验效果. 什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里 .better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等. 不少同学可能用过 better-scroll,我收到反馈最多的问题是:…

ESLint在vue中的使用

ESLint的用途 1.审查代码是否符合编码规范和统一的代码风格: 2.审查代码是否存在语法错误: 中文网地址 http://eslint.cn/ 使用VSCode编译器在Vue项目中的使用在初始化项目时选择是否使用ESLint管理代码(选择Y则默认开启) Use ESLint to lint your code? (Y/n) (此图仅为发小程序的mpvue框架使用) 默认使用的是此标准https://github.com/standard/standard/blob/master/doc…

vue中watch的使用

vue中watch的使用 vue中的watch是一个比较重要的概念,通过他我们可以检测data的变化,下面进行详细的介绍. watch定义方式如下: {[key: string]: string | Function | Object } 即在watch中, 键是一个字符串,它是被观测的对象. 值可以是一个字符串,这个字符串是方法名. 值还可以是一个函数,但不能使用箭头函数的形式,this会出现问题. 值也可以是一个对象,其中包含回调函数可以其他一些选项:比如是否深度遍历. 举例如下: <!DO…