Vue props配置项(属性)
功能:让组件接收外部传过来的数据
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配置项(属性)的更多相关文章
- vue watch 可以监听子组件props里面属性的改变
子组件watch 可以监听其props里面属性的改变 当changeFather导致calm改变时,会执行console.log('props change');
- wangEditor编辑器 Vue基本配置项
wangEditor编辑器 Vue基本配置项 1.Vue安装方法 npm i wangeditor -S <template> <div id='wangeditor'> &l ...
- Vue2.x源码学习笔记-Vue实例的属性和方法整理
还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...
- Vue的Key属性,v-for和v-if,v-if/v-show,v-pre不渲染,v-once只渲染一次
key属性为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. ...
- Vue props用法详解
Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数 ...
- Ext JS 4 新特性2:配置项属性(config)之二
Ext JS 4 新特征2:配置项属性config之二 ☞ Config(自动的setters和getters) Ext JS 4介绍了config声明方式,在Ext JS 中也有几个例子:在运行程序 ...
- Ext JS 4 新特性2:配置项属性(config)之一
Ext JS 4 新特征2:配置项属性config 最新版本的Ext JS 4.2的另外一个伟大的新特征就是增加了configuration配置项属性,当我们在创建一个新类的时候,经常性的要设置某某属 ...
- vue——props的两种常用方法
vue--props的两种常用方法 1.实现父-->子的通信 举例如下: 父组件 parent.vue <children :channel="object1"> ...
- vue的计算属性computed和监听器watch
<template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...
- Vue(十二)vue实例的属性和方法
vue实例的属性和方法 1. 属性 vm.$el vm.$data vm.$options vm.$refs <!DOCTYPE html> <html lang="en& ...
随机推荐
- Triple 协议支持 Java 异常回传的设计与实现
作者:Apache Dubbo Contributor 陈景明 背景 在一些业务场景, 往往需要自定义异常来满足特定的业务, 主流用法是在catch里抛出异常, 例如: public void dea ...
- vs code .net core Linux下离线安装Nuget包
本人第一次使用 vs code在linux下开发.net core项目,由于处于内网,无法通过在线安装,所以在遇见离线安装Nuget包时,耗费了一番功夫,网上也没有相关的,最后还是多个思路结合才解决的 ...
- 双层拖拽事件,用鼠标画矩形,拖动右下角可以再次改变矩形大小,方案一 有BUG
<template> <div class="mycanvas-container"> <vue-drag-resize :isActive = 't ...
- SpringBoot学习笔记 - 构建、简化原理、快速启动、配置文件与多环境配置、技术整合案例
[前置内容]Spring 学习笔记全系列传送门: Spring学习笔记 - 第一章 - IoC(控制反转).IoC容器.Bean的实例化与生命周期.DI(依赖注入) Spring学习笔记 - 第二章 ...
- Unity - 自定义Log
嗨,崽崽们大家好.实在是不知道写个啥了,最近总是恍惚,今儿偷个懒吧,给大家推荐一个小黑自己写的小型日志工具,在一些小项目中管够使用了. 那有人会问了,Unity不是自带日志么,为什么还要自己做个小工具 ...
- postgresql的mysql外部数据扩展mysql_fdw编译及安装
下载mysql_fdw项目文件:https://pgxn.org/dist/mysql_fdw/ 注:我使用的是ubuntu18.04,可以直接在仓库查看是否有二级制安装文件,当然是有的啦,这是很方便 ...
- Phi的反函数
P4780 Phi的反函数 Phi(\(\varphi\) )定义 \(\varphi(n)\) 代表从1-n所有与n互质的数的个数 求\(\varphi(n)\) 普通求法: 首先将n唯一分解为 \ ...
- 线程基础知识15-StampedLock
1 简介 StampedLock是JDK1.8中新增的一个读写锁,也是对JDK1.5中的读写锁ReentrantReadWriteLock的优化.在原先读写锁的基础上新增了一种叫乐观读(Optimis ...
- Android JetPack~ DataBinding(数据绑定)(一) 集成与使用
近期将会梳理一下JetPack全家桶的使用,包括DataBinding,Room,ViewModel,LiveData,Navigation等. 本来打算先写DataBinding的使用,没想到在17 ...
- STM32F1库函数初始化系列:定时器中断
1 static void TIM3_Configuration(void) //10ms 2 { 3 TIM_TimeBaseInitTypeDef TIM_TimeBaseStructure; 4 ...