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

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. Mariadb对数据库和表的操作

    登录mariadb: 路径切换到bin下 mysql -u root -p 然后会提示输密码 新建数据库: create database demo; 其中demo为数据库名字 新建表 create ...

  2. 《Effective C++》模版与泛型编程

    Item41:了解隐式接口和编译期多态. 纵使你从未使用过templates,应该不陌生"运行期多态"和"编译期多态"之间的差异.因为它类似于"哪一个 ...

  3. Mac上优秀的虚拟机软件推荐 PD Parallels Desktop 18.1.1

    APPERK 软件信息 软件名称 ParallelsDesktop 版本号 18.1.1 软件类型 官网版 + 商业版 安装包大小 390MB 语言 中文 系统支持 macOS11及以上(M芯片原生) ...

  4. Java入门与进阶P-4.5+P-4.6

    逻辑类型 关系运算的结果是要给逻辑值,true或false.这个值可以保存在一个对应的逻辑类型变量中,这样的变量类型是boolean 布尔是为了纪念George Boole对逻辑计算得到贡献 bool ...

  5. 行为型模式 - 访问者模式Visitor

    学习而来,代码是自己敲的.也有些自己的理解在里边,有问题希望大家指出. 行为型模式,我之所以把他放到第一个,是因为它号称是GoF中最难的一个. 模式的定义与特点 在访问者模式中(Visitor Pat ...

  6. JavaScript五花八门的跳转方式

    我们最常见的跳转方式是location.href = "http://www.baidu.com", 这种是最常见的,但是常常使用location.replace,location ...

  7. 10月27日内容总结——hashlib加密模块和logging、subprocess模块

    目录 一.hashlib加密模块 1.何为加密 2.为什么加密 3.如何判断数据是否以加密 4.密文的长短有什么意义 5.加密算法的基本操作 二.加密补充说明 三.subprocess模块 1.sub ...

  8. Grafana 系列文章(十二):如何使用Loki创建一个用于搜索日志的Grafana仪表板

    概述 创建一个简单的 Grafana 仪表板, 以实现对日志的快速搜索. 有经验的直接用 Grafana 的 Explore 功能就可以了. 但是对于没有经验的人, 他们如何能有一个已经预设了简单的标 ...

  9. 关于Vue2.x与Es6一些特性

    关于Vue2.x与Es6一些特性 Vue的定位,就是快速开发. 这些特性,我没有过于熟练,导致写的代码质量不高. 过滤器 <template> <div> {{title | ...

  10. Linux06-常用命令 日期 日历 查找 过滤

    1.date  日期 2.cal 日历 3.find 查找 4.locate 查找 5.grep  过滤 1.时间日期类 date指令-显示当前日期 1)指令: date (功能描述:显示当前时间) ...