功能:让组件接收外部传过来的数据

1、传递数据:

<Demo name="XXX"/>

2、接收数据:

(1)第一种方式(只接收):

  props:['name']

(2)第二种方式(限制类型):

  props:{

    name:String

  }

(3)第三种方式(限制类型、限制必要性、指定默认值)

  props:{

    name:{

    type:String,  //类型

    required:true,  //必要性

    default:"老王"  //默认值

    }

  }

3、备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,

  若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。

案例:

1、传值:

2、接收值:

结果图:

Vue props配置项(属性)的更多相关文章

  1. vue watch 可以监听子组件props里面属性的改变

    子组件watch 可以监听其props里面属性的改变 当changeFather导致calm改变时,会执行console.log('props change');

  2. wangEditor编辑器 Vue基本配置项

    wangEditor编辑器 Vue基本配置项 1.Vue安装方法 npm i wangeditor -S <template> <div id='wangeditor'> &l ...

  3. Vue2.x源码学习笔记-Vue实例的属性和方法整理

    还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...

  4. Vue的Key属性,v-for和v-if,v-if/v-show,v-pre不渲染,v-once只渲染一次

    key属性为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. ...

  5. Vue props用法详解

    Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数 ...

  6. Ext JS 4 新特性2:配置项属性(config)之二

    Ext JS 4 新特征2:配置项属性config之二 ☞ Config(自动的setters和getters) Ext JS 4介绍了config声明方式,在Ext JS 中也有几个例子:在运行程序 ...

  7. Ext JS 4 新特性2:配置项属性(config)之一

    Ext JS 4 新特征2:配置项属性config 最新版本的Ext JS 4.2的另外一个伟大的新特征就是增加了configuration配置项属性,当我们在创建一个新类的时候,经常性的要设置某某属 ...

  8. vue——props的两种常用方法

    vue--props的两种常用方法 1.实现父-->子的通信 举例如下: 父组件 parent.vue <children :channel="object1"> ...

  9. vue的计算属性computed和监听器watch

    <template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...

  10. Vue(十二)vue实例的属性和方法

    vue实例的属性和方法 1. 属性 vm.$el vm.$data vm.$options vm.$refs <!DOCTYPE html> <html lang="en& ...

随机推荐

  1. JAVA中的注解可以继承吗?

    前言 注解想必大家都用过,也叫元数据,是一种代码级别的注释,可以对类或者方法等元素做标记说明,比如Spring框架中的@Service,@Component等.那么今天我想问大家的是类被继承了,注解能 ...

  2. MySQL字符编码、存储引擎、严格模式、字段类型之浮点 字符串 枚举与集合 日期类型

    目录 字符编码与配置文件 数据路储存引擎 创建表的完整语法 字段类型之整型 严格模式 字段类型之浮点型 字段类型之字符串类型 数字的含义 字段类型之枚举与集合 字段类型之日期类型 字符编码与配置文件 ...

  3. SQLMap自带绕过脚本tamper的讲解

      sqlmap在默认情况下除了使用CHAR()函数防止出现单引号,没有对注入的数据进行修改,还可以使用--tamper参数对数据做修改来绕过WAF等设备,其中大部分脚本主要用正则模块替代攻击载荷字符 ...

  4. 3、swagger-ui导出word接口文档

    参考 1.修改swagger2word项目的 application.yml 文件的 swagger.url 为Swagger Json资源的url地址(网址+端口): 例:swagger.url: ...

  5. mysql游标最后一行重复问题

    今天用调用存储过程时发现数据有点问题,和预期不一致 经排查,发现是游标在遍历过程中重复遍历了,或者说是对游标下标的判断有Bug 调试后发现是游标使用方式不正确 应该在循环外先对游标进行一次取值操作,在 ...

  6. MySQL join语句怎么优化?

    在MySQL的实现中,Nested-Loop Join有3种实现的算法: 1. Simple Nested-Loop Join:简单嵌套循环连接 2. Block Nested-Loop Join:缓 ...

  7. Maui Blazor 使用摄像头实现

    Maui Blazor 使用摄像头实现 由于Maui Blazor中界面是由WebView渲染,所以再使用Android的摄像头时无法去获取,因为原生的摄像头需要绑定界面组件 所以我找到了其他的实现方 ...

  8. 算法之倍增和LCA:论点与点之间的攀亲戚

    前言 我们在做树形题和图论题时常常遇到这样的问题:要求求出树上两点间的最近公共祖先(LCA),这时我们该怎么办? 思路一:暴力爬爬爬-- 很容易想到让两个点都往上爬,啥时候相遇了就是他们的最近公共祖先 ...

  9. Codeforces Round #846 (Div. 2) A-E

    比赛链接 A 题意 给 \(n\) 个正整数,找到三个数,使得他们的和为奇数,输出他们的下标. 题解 知识点:贪心. 找到三个奇数或者一个奇数两个偶数即可,其他情况无解. 时间复杂度 \(O(n)\) ...

  10. ionic+vue+capacitor系列笔记--常见报错以及解决

    1.Require statement not part of import statement.(@typescript-eslint/no-var-requires) 解决 .eslintrc.j ...