vue中父传子props的使用
第一种
传递一个数组
props:["cont"]
第二种
传递一个对象
props:{
uploadOption:{
type:Object, 参数类型必须是一个对象
required: true 这一种说明这个参数是必须的哈
}
}
其他的用法
基础的类型检查 (null 和 undefined 会通过任何类型验证)
props: {
propA: Number, //如果不符合类型 控制台会警告
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true //必填
},
// 带有默认值的数字 propD是一个数字,如果没有值,默认是100
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
vue中父传子props的使用的更多相关文章
- vue小故事之父子(上下级)通信之父传子props
vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props 或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...
- vue传值 ---- >> 父传子,props()
父组件: 1 <template> 2 <div class="comment"> 3 <div>comment ...
- 深度剖析Vue中父给子、子给父、兄弟之间传值!
本片文章将为您详细讲解在Vue中,父给子传值.子给父传值以及兄弟之间传值方式! 父传子:父组件 // template里面 <aa :info="name"/> // ...
- vue中父组件使用props或者$attras向子组件中传值
知识点:vue中使用props或者$attras向子组件中传值 (1) props传值 子组件必须注册好要传的数据() props:['id'] (2)$attrs传值 该数据在props中,没有注册 ...
- 总结vue中父向子,子向父以及兄弟之间通信的几种方式
子向父方式1:通过props,如例子中子组件test1.vue向父组件App.vue传值 App.vue代码 <template> <div id="app"&g ...
- vue 组件之间相互传值 父传子 子传父
1.父传子 把要传入的值放到父标签里 子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue ---- 组价 组件化 子传父 父传子
目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...
- vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息
评论案例 splice: (start 几位,替换(新增)内容) splice(0,0,内容)在头部插入内容 splice(0,1) 把索引为0的往后删除1位 splice(0,1,内容)把索引为0 ...
- vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值
首先文字简单撸一下 父子传子 -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父 ------在父组件升上自定义一个方法,在子组件里通过this ...
随机推荐
- 云图说|初识云数据库GaussDB(for Redis)
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:云数据库Gauss ...
- MRS HetuEgine的数据虚拟化实践
摘要:华为MRS云原生数据湖平台的HetuEngine就是一款解决大数据时代跨源跨域问题的数据虚拟化引擎. 本文分享自华为云社区<基于华为云原生数据湖MRS HetuEgine的数据虚拟化实践& ...
- 云图说|图解DGC:基于华为智能数据湖解决方案的一体化数据治理平台
摘要:数据湖治理中心DGC,帮助企业快速构建从数据集成到数据服务的端到端智能数据系统,消除数据孤岛,统一数据标准,加快数据变现,实现数字化转型. 本文分享自华为云社区<[云图说]第232期 图解 ...
- OGC标准WMTS服务概念与地图商的瓦片编号流派-web地图切片加载
还不知道地图栅格化切片等相关GIS原理的,推荐阅读<webGIS底图栅格化与实时数据合成处理原理,地图API设计,xyz加载> OGC概念 OGC全称--开放地理空间信息联盟(Open G ...
- 微软的一些公开课,Python、机器学习、SQL、AI,全部免费
大家好,我是老章,刷X看到一位博主Alif Hossain@alifcoder总结了微软的一些公开课,全部免费,蛮不错的.感兴趣可以学一波,还能领徽章. 1. 机器学习简介 本课程是学习机器学习基础知 ...
- 哈佛大学《CS50 Python人工智能入门》公开课 (2020)
课程介绍 本课程探讨现代人工智能基础上的概念和算法,深入探讨游戏引擎.手写识别和机器翻译等技术的思想.通过实践项目,学生在将图形搜索算法.分类.优化.强化学习以及其他人工智能和机器学习的主题融入到他们 ...
- Codeforces Round #629 (Div. 3) & 19级暑假第六场训练赛
A:Codeforces 1328A Divisibility Problem 整除+模 Input 5 10 4 13 9 100 13 123 456 92 46 Output 2 5 4 333 ...
- Qt大型工程开发技术选型PartFinal:CLR调用COM组件
Qt大型工程开发技术选型PartFinal:CLR调用COM组件 这里其实没什么内容了,直接上代码吧,如下文所示: #pragma once #using <mscorlib.dll> u ...
- C#设计模式09——组合模式的写法
1. 什么是C#组合模式? 组合模式是一种结构型设计模式,它允许将对象组合成树形结构以表示"整体/部分"层次结构.使用此模式,客户端可以按相同的方式处理单个对象和对象集合,而不必关 ...
- 05_二叉树的层次遍历II
二叉树的层序遍历 II 给你二叉树的根节点 root ,返回其节点值 自底向上的层序遍历 . (即按从叶子节点所在层到根节点所在的层,逐层从左向右遍历) 示例 1: 输入:root = [3,9,20 ...