vue 判断是否function_vue2.0组件的prop验证中的Function类型怎么使用(向子组件传递函数对象的正确方法)？...
首先说明，下边的回答是不正确的，我也是最近开始看 vue，都是根据文档来的，然后在讨论的过程中发现了问题，可以确认的是 vue props 设置的默认值和类型检查之类的只检测第一层，而里层的内容是不检测的，具体可以看这里。
如下所示，只能检测传过来的 propC propC 的类型和默认值，而不会检测 propD 的属性 Da、Db 的值
Vue.component('example', {
props: {
propC: {
type: String,
required: true
},
// 上边的是可以的，而下边的是不可以的
propD: {
Da:{
type: Number,
default: 100
},
Db:{
type: String,
default: ''
}
}
}
})
-----以下是原答案-----
先抄一段文档：
Vue.component('example', {
props: {
// 基础类型检测 (`null` 意思是任何类型都可以)
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字，有默认值
propD: {
type: Number,
default: 100
},
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})
所以可以用自定义验证函数，另外我查了下是支持Function的：
type 可以是下面原生构造器： String Number Boolean Function Object Array Symbol
type 也可以是一个自定义构造器函数，使用 instanceof 检测。
当 prop 验证失败，Vue 会在抛出警告 (如果使用的是开发版本)。注意 props 会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，诸如 data、computed 或 methods 等实例属性还无法使用。
所以你的问题在于default的定义，从propE里的示例就可以看出来，如果 default 的值是 function 类型，那么是取其返回值的，你的报错显示的也很清楚，click 的函数是undefined，就是因为没有返回值的原因，所以 default 写法如下：
经过看源代码，发现下边这两种写法是错误的，特别强调一下，下边是错误的。Type 是 Function 的时候不用再用 function 包一层，源码在这里
enterback:{
type: Function,
default(){
return ()=>{console.log('enterback')}
}
}
//es5 写法
enterback:{
type: Function,
default: function () {
return function () {
console.log('enterback')
}
}
}
ps: 我没有跑过代码，根据文档猜的，应该可以，详见 文档
vue 判断是否function_vue2.0组件的prop验证中的Function类型怎么使用(向子组件传递函数对象的正确方法)？...相关推荐
- Vue项目中使用props传递数据并允许子组件修改的方案
在项目中遇到了一个相关需求: 一个页面中为了能够使代码更加简洁和易于查看,将其分成了多个功能模块.此时多个功能模块都需要使用共同的一组数据进行展现或对其进行修改.此时考虑到Vue项目中的数据通信方式: ...
- Vue父组件使用子组件时，需要携带参数，函数内如何获取子组件给的值
在参数中 通过$event获取: 子组件 this.$emit('visible-change', val) 父组件 <en-category-picker @visible-change=&q ...
- 复姓判断 php,我想在表单验证中加入中文姓名合法性模糊匹配判断？
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 刚开始只是想检验一下输入的是不是中文,后来学了正则表达式后,想尝试一下,把常见的姓氏通过字符串判断的形式,主要是对姓氏进行验证,当然还有输入长度,可我对自 ...
- Vue 组件(二)——Prop
四.Prop 在组件的使用过程中,经常会遇到需要向子组件传递数据的情况,这个时候就需要用到 prop来自定义属性传值了. prop概念: prop属性其实是一个对象,在这个对象里可以定义一些数据,而这 ...
- vue怎么调用子元素的方法_vue 父组件中调用子组件函数的方法
vue 父组件中调用子组件函数的方法 在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数 ...
- baidumap vue 判断范围_vue 数据渲染
本文转载于 SegmentFault 社区社区专栏:山外de楼作者:山外de楼 前言 vue 是如何将编译器中的代码转换为页面真实元素的?这个过程涉及到模板编译成 AST 语法树,AST 语法树构建渲 ...
- 41. Vue组件传值-父组件向子组件传值
前言 前面写了组件的创建.切换等等篇章,主要讲述了组件自身如何在父组件app中如何渲染使用.这里存在一个问题,就是父组件的数据如何传递到子组件中. 这是一个很常见的情况,如果是jQuery那么都是直接 ...
- vue爬坑之 父组件向子组件异步传参 子组件中拿不到值的解决方法
做项目时候遇到一件怪事: 父组件向子组件<dialog-info/>传个参数arrdata,是个数组 因为是Array类型的参数,子组件中进行了接收,并且default通过函数返回一个空数 ...
- vue --- ref属性获取dom元素和子组件的方法
说明: // 假设login的组件定义如下: Vue.component('login', {template:'<h1>登录</h1>',data(){return {msg ...
- vue --- 模块从子组件获取数据
先看个一般的例子: // 我们需要将信息从子组件传递给父组件,(有可能不止一条信息,因此)肯定需要一个标识,这个标识放在$emit里面(js),在dom中通过@来关联父元素.如下:<div id ...
最新文章
- spoj Find Log
- 01.05第六周周总结
- IMOAutocompletionViewController
- myisam为什么比innodb查询快_InnoDB 和 MyISAM的数据分布是什么样的？
- java并发编程--Executor框架
- win7下安装Oracle10g解决方案
- geek_Ask How-To Geek：营救受感染的PC，安装无膨胀iTunes和驯服疯狂的触控板
- 大容量存储方案_基因行业容器存储解决方案
- flask 允许内网访问
- 利用matlab自带函数快速提取二值图像的图像边缘 bwperim函数
- Pytorch和Torchvision版本对应
- 【chromium cdm 模块源码分析】
- Python函数的返回值
- shell编程三大神器之awk
- Word论文排版之样式的使用
- G1调优实践日记--G1HeapWastePercent和InitiatingHeapOccupancyPercent的应用
- Spring-DI详解
- 【Nginx】Nginx配置实例-反向代理
- 如何彻底删除Sql server 2008数据库
- 学Python有什么好处？Python有哪些优点和特征？
热门文章
- MySQL如何使用索引 较为详细的分析和例子
- ZOJ Bookcase
- ie6下margin间距是两倍的解决办法
- [原] 计算机调试管理器服务被禁用的解决方法
- latex放一张大图在作者和正文之间
- Atitit 艾提拉总结的操作硬件解决方案 目录 1.1. Atitit 列出wifi热点以及连接 1 1.2. 剪贴板 1 1.3. 屏幕 触摸与截屏 1 1.4. 性能 cpu 内存 硬盘 资源
- Atitit 常用加密算法 aes des rsa 比较 历史演进 目录 1.1. 常规加密算法如下 Aes 3des des rsa 1 2. 加密算法历史演进 按照出现时间和加密强度 流行
- Atitit 数据存储的数据表连接attilax总结
- paip.编程语言方法重载实现的原理及python,php,js中实现方法重载
- paip.提升用户体验---c++ QLabel标签以及QLineEdit文本框控件透明 设置