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

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. 三步快速搭建Typora图床(SM.MS+PicGo)

    三步快速搭建Typora图床(基于SM.MS+PicGo) 前言 在有些同学使用Typora的过程中,会发现Typora不像Word一样,在文档脱离本机后依然正常显示图片,自己的tyopora文件在发 ...

  2. MongoDB从入门到实战之MongoDB简介

    前言 相信很多同学对MongoDB这个非关系型数据库都应该挺熟悉的,在一些高性能.动态扩缩容.高可用.海量数据存储.数据价值较低.高扩展的业务场景下MongoDB可能是我们的首选,因为MongoDB通 ...

  3. jmeter 之性能分布式压测

    背景: 当并发量达到一定数量时,单台测试设备不足以支撑,甚至会出现内存溢出等情况,解决这个问题就可用分布式测试,使用多台测试设备来达到更大的用户并发数. 原理: 1.一台设备作为调度机(master) ...

  4. 1、debug调试

    Debug断点调试: Debug调试界面图: 利用Debug功能来追踪代码的运行流程,分析与定位异常发生的位置,观察运行中数据的变化. 1.Step Over(F8):进入下一步,如果当前行断点是一个 ...

  5. vivo 游戏中心低代码平台的提效秘诀

    作者:vivo 互联网服务器团队- Chen Wenyang 本文根据陈文洋老师在"2022 vivo开发者大会"现场演讲内容整理而成.公众号回复[2022 VDC]获取互联网技术 ...

  6. LFU 的设计与实现

    LFU 的设计与实现 作者:Grey 原文地址: 博客园:LFU 的设计与实现 CSDN:LFU 的设计与实现 题目描述 LFU(least frequently used).即最不经常使用页置换算法 ...

  7. P5687 [CSP-S2019 江西] 网格图

    题面 给定一个 \(n\times m\) 的网格图,行从 \(1\sim n\) 编号,列从 \(1\sim m\) 编号,每个点可用它所在的行编号 \(r\) 与所在的列编号 \(c\) 表示为 ...

  8. pytest框架的简介

    概念:是一款基于python语言的单元测试框架 用途:用于发现测试用例.执行测试用例.判断测试结果.生成测试报告的一款框架 测试用例的规则: 测试文件必须与test开头,或_test结尾 类文件必须T ...

  9. 梯度下降算法 Gradient Descent

    梯度下降算法 Gradient Descent 梯度下降算法是一种被广泛使用的优化算法.在读论文的时候碰到了一种参数优化问题: 在函数\(F\)中有若干参数是不确定的,已知\(n\)组训练数据,期望找 ...

  10. 打包iOS App并上架到TestFlight测试

    开发者账号 首先需要注册一个开发者账号,不然什么都免谈.在手机Apple Developer上注册给钱就行了,个人开发者一年688元. 打包App App开发好后,就可以通过XCode打包.打包前选好 ...