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& ...
随机推荐
- 开发一个MyBatis通用Mapper的轮子
一.前言 程序猿为什么如此执着于造轮子?MyBatis-Plus如此强大的工具流行这么多年了,我为啥还在重复造这样的轮子? 1.公司的技术规范不允许使用MyBatis-Plus,咱也不知道什么原因: ...
- 过滤器 Filter 与 拦截器 Interceptor 的区别
引言 说起 Filter 与 Interceptor 的区别,相信很多同学第一感觉就是容易.简单! 毕竟开发中这两个组件使用频率较高,用法也较简单.然后真回答起来有答不出个所以然来,场面尴尬,老丢脸了 ...
- STL map容器常用API
map容器:键值和实值是分开的,排序规则按照键值排序 #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<map& ...
- sniff()函数的总结
作用: sniff()函数主要是用来捕获经过本机网卡的数据包 格式: sniff(filter="",iface="any",prn=function,coun ...
- 【爬虫+数据分析+数据可视化】python数据分析全流程《2021胡润百富榜》榜单数据!
目录 一.爬虫 1.1 爬取目标 1.2 分析页面 1.3 爬虫代码 1.4 结果数据 二.数据分析 2.1 导入库 2.2 数据概况 2.3 可视化分析 2.3.1 财富分布 2.3.2 年龄分布 ...
- 2021强网杯青少赛(qwtac)楼上大佬ddw WriteUp
楼上大佬ddw战队WRITEUP 战队信息 战队名称:楼上大佬ddw 战队排名:24 解题情况 解题过程 01 签到 操作内容: 下载附件,打开运行拿到flag 如该题使用自己编写的脚本代码请详细写出 ...
- 搭建一个Hexo个人博客系统
0x01 前言 虽然说前两天折腾了一下博客园(自己之前也有做过自己的博客,奈何维护费用太贵了,真的消耗不起,钱要花在刀刃上.) 网上有些教程有些参差不齐,今天给自己的真实搭建过程呈现给大家. 0x02 ...
- Adversarial Active Learning based Heterogeneous GNN for Fake news Detection-ICDM20
一.摘要 假新闻的爆炸性增长,以及对政治.经济和公共安全的破坏性影响,增加了对假新闻检测的需求.社交媒体上的假新闻并不是以文章的形式独立存在的.许多其他实体,如新闻创造者.新闻主题等,都存在于社交媒体 ...
- 洛谷P1259 黑白棋子的移动 题解
本蒟蒻这题用的打表做法,其实也可以理解为是一种递推. 先来观察一下样例: 当n为7时,输出共有14行,易得输出行数为2n. ooooooo*******-- oooooo--******o* oooo ...
- java入门与进阶P-1.7+P-1.8
赋值 通常在声明变量后,使用赋值语句给变量赋值. 在JAVA中将 "="作为 赋值运算符. 表达式:标识涉及值,变量和操作符的一个运算,他们组合在一起计算出一个新的值.所以赋值语句基本就是计算出一个值 ...