所谓非 prop 特性,就是指它可以直接传入组件,而不需要定义相应的 prop。

尽管为组件定义明确的 prop 是推荐的传参方式,组件的作者却并不总能预见到组件被使用的场景。所以,组件可以接收任意传入的特性,这些特性都会被添加到组件的根元素上。

例如,假设我们使用了第三方组件 bs-date-input,它包含一个 Bootstrap 插件,该插件需要在 input 上添加 data-3d-date-picker 这个特性。这时可以把特性直接添加到组件上 (不需要事先定义 prop):

<bs-date-input data-3d-date-picker="true"></bs-date-input>

添加属性 data-3d-date-picker="true" 之后,它会被自动添加到 bs-date-input 的根元素上。

举个例子:

 1 <div id="app">
2 <my-comp data-title="learn vue" class="mycls" style="color:red;"></my-comp>
3 </div>
4 <script>
5 Vue.component('my-comp', {
6 template: '<div>我是组件</div>'
7 });
8 new Vue({
9 el: '#app'
10 });
11 </script>

说明:data-title,class,style就是非prop属性,无需定义相应的prop,这些属性都会被添加到组件的根元素上。

渲染结果:<div data-title="learn vue" class="mycls" style="color: red;">我是组件</div>

Vue--理解非prop特性的更多相关文章

  1. 浅谈Vue中的Prop

    Prop 基本用法 Prop的基本用法很简单,只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可 Vue.component('child', { ... // 接收message p ...

  2. vue组件参数校验与非props特性

    组件参数校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  3. 4-3 组件参数校验与非props特性

    本文参考脚本之家,https://www.jb51.net/article/143466.htm 通过属性的形式,父组件对子组件进行参数的传递 //如下图: //父组件设置content属性,向属性中 ...

  4. 学习笔记:Vue——组件和Prop

    前言:这一篇是关于组件基础.组件注册.Prop等内容. 1.组件基础 01.组件是可复用的Vue实例 02.组件中的data选项必须是一个函数 03.一个组件默认可以有任意数量的prop 任何值都可以 ...

  5. C++对C语言的非面向对象特性扩充(3)

    今天要讲的是C++作用域运算符"::",强制类型转换的扩充,C++中相对于C中malloc和free函数的运算符new和delete,以及C++对C的一个重要扩充:引用(refer ...

  6. C++对C语言的非面向对象特性扩充(1)

    我将分3篇来介绍C++相对于C在非对象特性上的扩充,今天要讲的是C++在注释,输入输出,局部变量说明的扩充,以及const修饰符与C中的#define的比较. 1.C++注释除了包括原有C的块注释/* ...

  7. vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed for prop "value".报错解决

    在uni中使用 picker组件,一直报错 vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed ...

  8. [Vue warn]: Invalid prop: custom validator check failed for prop "type".

    遇到错误如下, [Vue warn]: Invalid prop: custom validator check failed for prop "type". found in ...

  9. [Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript

    With properties we can follow a one-way parent→child flow communication between components. This les ...

随机推荐

  1. CSP-S 模拟测试 45 题解

    由于咕掉的题解太多了,所以只能趁改完不动题的时间,来补补坑qwq,还是太弱了. 考试过程: 到新机房的第一次考试,貌似海星? 第一题一开始就觉得是个贪心,但以为所有小怪兽都要打完,所以想复杂了,但后来 ...

  2. RabbitMQ的下载与安装

    RabbitMQ的安装注意事项: 1. 系统的管理员账户不能是中文(win8) 2. 计算机名不能是中文(win8) 3. 推荐:使用默认的安装目录 4. 使用的计算机用户必须是管理员 如果安装不成功 ...

  3. Python面试题:使用栈处理括号匹配问题

    括号匹配是栈应用的一个经典问题, 题目 判断一个文本中的括号是否闭合, 如: text = "({[({{abc}})][{1}]})2([]){({[]})}[]", 判断所有括 ...

  4. Java基础_类的加载机制和反射

    类的使用分为三个步骤: 类的加载->类的连接->类的初始化 一.类的加载 当程序运行的时候,系统会首先把我们要使用的Java类加载到内存中.这里加载的是编译后的.class文件 每个类加载 ...

  5. Light Switching(SPOJ LITE)—— 线段树成段更新异或值

    题目连接:http://www.spoj.com/problems/LITE/en/. 题意:有若干个灯泡,每次对一段操作,这一段原先是亮的,就关了:原先是关着的,就打开.询问某一段的打开的灯泡的个数 ...

  6. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

  7. 尚硅谷周阳老师-redis脑图课件

    因为脑图原件是.mmap格式,使用wps和xmind打开都会有格式不兼容的问题,这里我们可以使用mindmanager存为html5交互式格式, 提供在线阅读.因为阿里云学生服务器带宽有限,这里打开加 ...

  8. sentinel备忘

    git https://github.com/alibaba/Sentinel   https://github.com/dubbo/dubbo-sentinel-supportdubbo http: ...

  9. 性能优化 | JVM与性能优化知识点综合整理

    JVM JVM是java的核心和基础,在java编译器和os平台之间的虚拟处理器.它是一种利用软件方法实现的抽象的计算机基于下层的操作系统和硬件平台,可以在上面执行java的字节码程序. java编译 ...

  10. 3.AOP中的IntroductionAdvisor

    上篇中的自定义Advisor是实现的AbstractPointcutAdvisor,Advisor其实还有一个接口级别的IntroductionAdvisor                     ...