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

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. eclipse打不开maven项目中的pom.xml

    1.问题描述 在eclipse中我双击打开maven项目中的pom.xml报错. 2.产生原因 正如报错中描述的那样"Failed to create the part's controls ...

  2. 企业应用架构研究系列二十五:IdentityServer4 认证服务搭建

    IdentityServer4 更新了开源协议,曾经想替换它,不在使用IdentityServer4 ,但是后来,研究来研究去,发现IdentityServer4 的功能实在是强大,设计体系完整,随着 ...

  3. 《Effective C++》设计与声明章节

    Item18:让接口容易被正确使用,不易被误用 总结: 1.好的接口很容易被正确使用,不容易被误用.你应该在你的所有接口中努力达到这些性质. 2."促进正确使用"的办法包括接口的一 ...

  4. P8622 [蓝桥杯 2014 国 B] 生物芯片

    简要题意 有 \(N\) 个二进制数,编号为 \(1\sim N\),初始时都是 \(0\).博士进行了 \(N-1\) 次操作,在第 \(i\) 次操作时,会将 \(1\sim N\) 中所有编号为 ...

  5. Lspatch使用

    前言 xp模块可以使用户获得应用原本所没有的功能. 使用模块需要修改应用.对于Root用户来说,使用Lsposed是个不错的选择,也方便. 但是大多数用户没有将手机Root. 所以Lsposed的开发 ...

  6. Java 进阶P-5.3+P-5.4

    封装 增加可扩展性 可以运行的代码!=良好的代码 对代码做维护的时候最能看出代码的质量 如果想要增加一个方向,如down或up 用封装来降低耦合 Room类和Game类都有大量的代码和出口相关 尤其是 ...

  7. C#,Winform软件防破译-源代码加密简单方法之.NET REACTOR(二)制作软件及软件试用时间限定

    二.简单介绍使用 .net reactor 软件制作试用软件,利用license制作授权软件的方法. 1.首先,生成试用版软件 设置主文件和附属文件,打开.net Reactor 设置试用期限,在Se ...

  8. mybatis-plus 多租户

    package com.ruoyi.framework.config; import org.springframework.context.annotation.Bean; import org.s ...

  9. 线程基础知识09-JAVA的可见性和有序性问题

    1 CPU中的三级缓存及可见性问题 1.1 简介 1.2 缓存行Cacheline 1.3 可见性问题-缓存一致性协议 2 JAVA中的有序性问题 2.1 指令重排简介 2.2 as-if-seria ...

  10. vscode安装教程(含插件配置)

    1.下载 下载地址:Download Visual Studio Code VS code,全称Visual Studio Code,是Microsoft(微软)在2015年4月30日发布的,编写现代 ...