Vue 组件参数校验与非props特性

2019-02-11 admin

组件的参数校验

组件的参数校验指的是什么呢?你父组件向子组件传递的内容,子组件有权对这个内容进行一些约束,这个约束我们可以把它叫做参数的校验。

<div id="root">
    <child content="hello world"></child>
</div>
Vue.component('child',{
    props: ['content'],
    template: '<div>{{content}}</div>'
})
let vm = new Vue({
    el: '#root',
})

现在有这样一个需求,父组件调用子组件的时候,传递的这个content,我要做一些约束,要求它我传递过来的content必须是一个字符串,我们该怎么实现呢?

<div id="root">
    <child content="hello world"></child>
</div>
Vue.component('child',{
    props: {
        content: String         //子组件接收到的 content 这个属性,必须是一个字符串类型的
    },
    template: '<div>{{content}}</div>'
})
let vm = new Vue({
    el: '#root',
})

组件接收到的content这个属性,必须是一个字符串类型的,如果我需要的参数类型是字符串或者数组,又该怎么写呢?

props: {
    content: [ String, Number ]
},

content的类型,可以用数组来表示。

content其实还有更复杂的用法:

props: {
    content: {
        type: Sring,
        required: true,                 //必传
        default: 'default value',       //默认显示,非必传会显示
        validator(value){              //检测 content 的长度,如果长度大于 5,正常显示,如果长度小于 5 则报错 
            return (value.length > 5)
        }
    }
}

props特性

说到非props特性,它一定和props特性相对应。

props特性:当你的父组件使用子组件的时候,通过属性向子组件传值的时候,恰好子组件里面声明了对父组件传递过来的属性的一个接收,也就是说父子组件有个对应关系,如果你这么写我们就把叫做props特性

props特性的特点是,如下图:

  1. 我们在子组件里有一个content的内容传递,这个属性的内容传递是不会在dom标签上进行显示的。
  2. 当你父组件传递了content,你子组件接收了这个content,你在模版里就可以直接通过插值表达式或者通过this.content,去取得content里面的内容了。

props特性:父组件向子组件传递了一个属性,但是子组件并没有props这块的内容,也就是说子组件并没有声明我要接收父组件的传递过来的内容

props特点:

  1. props特性在子组件里面,没办法获取到你父组件传递的内容,因为你压根没声明你要获取的内容,也就没法用。
  2. 如果我们用的是非props特性,那么这个特性是会显示在dom标签上的

原文链接:https://segmentfault.com/a/1190000018120355

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53535.html

文章标题:Vue 组件参数校验与非props特性

相关文章
IO.js 1.0.0 正式发布,支持 ES6 语言特性!
IO.js 是为 V8 引擎编写的基于事件 IO 的实现。Node.js中一群不满Joyent公司控制的信徒发起了另外一个项目io.js,即另外一个支持服务器端JavaScript的变种,称为io.js或iojs 。 IO.js 1.0.0...
2015-11-12
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
HTML5移动应用开发的12大特性
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少...
2015-11-11
移动端网页设计经验与心得
智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上。 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝、黑、白,界面单调,并且要尽可能的设计简单。 现在情况就大不相同了,软件上we...
2015-12-23
游戏机遇到来 非主流HTML5能否成器?
2014年第四季度以来,有60%的游戏行业从业者已经投入或准备投入开发HTML5为基础的游戏,并对其前景表示乐观的态度。   对HTML 5这项诞生于2008年的标准来说,其正在经历最好的时代。 游戏机遇到来 非主流HTML5能否成器?  ...
2015-11-12
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
回到顶部