详解vue中组件参数


Posted in Javascript onJuly 09, 2018

我们来聊一下vue中的组件参数.

1.vue中组件参数

我们可以为组件的 prop 指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

我们来看下最为简单和常见的vue代码

<div id="root">
      <item content="hello"></item>
    </div>
    <script>
      Vue.component("item",{
        props:["content"],
        template:"<div>{{content}}</div>"
      })
      new Vue({
        el:"#root"
      })
    </script>

这是一个最简单的创建组件和父组件向子组件的例子,但是我们在是否可以考虑一下,如果我希望父组件向子组件传递参数的时候是个数字类型呢?又或者是布尔类型呢?所以我们在这里就必须要对父组件传递过来的参数做一个校验。

<div id="root">
      <item content="hello"></item>
    </div>
    <script>
      Vue.component("item",{
        props:{
          content:String
        },
        template:"<div>{{content}}</div>"
      })
      new Vue({
        el:"#root"
      })
    </script>

我们对第一个例子的代码进行了修改,我们把子组件中的props属性,改为一种对象的形式,而且我们也约束了父组件传递过来的content为String类型,但是还会有这样的一种情况出现,请看下面的代码:

<div id="root">
      <item content="1"></item>
    </div>
    <script>
      Vue.component("item",{
        props:{
          content:String
        },
        template:"<div>{{content}}</div>"
      })
      new Vue({
        el:"#root"
      })
    </script>

我们改变了父组件中content的值等于1,那么我们就很自然的把content理解为数字类型,那么页面就会出现报错的提示.但是我们打开页面后,并没有浏览器报错。这又是为什么呢?

在vue中,默认传递的值都是字符串,如果你想要传递一个数字,那么必须在content前面添加一个:

我们希望它出现报错,那么我们就应该这么修改以上的代码。

<div id="root">
      <item :content="1"></item>
    </div>
    <script>
      Vue.component("item",{
        props:{
          content:String
        },
        template:"<div>{{content}}</div>"
      })
      new Vue({
        el:"#root"
      })
    </script>

那么这个时候,VUE就会给我们一个代码错误提示。如果我们希望它不报错,那么我们修改一下content里面的类型

<div id="root">
      <item :content="1"></item>
    </div>
    <script>
      Vue.component("item",{
        props:{
          content:Number
        },
        template:"<div>{{content}}</div>"
      })
      new Vue({
        el:"#root"
      })
    </script>

当然了,content也是可以接受一个数组的,用来判断它父组件为子组件传递的多个参数。

<div id="root">
      <item :content="1"></item>
    </div>
    <script>
      Vue.component("item",{
        props:{
          content:[String,Number]
        },
        template:"<div>{{content}}</div>"
      })
      new Vue({
        el:"#root"
      })
    </script>

除了数组形式,我们也可以写成对象的形式。那么对象的形式,vue为我们提供了各种可选的参数。

<div id="root">
      <item content="hello world"></item>
    </div>
    <script>
      Vue.component("item",{
        props:{
          content:{
            type:String,
            required:true,
            default:"asd",
            validator:function(value){
              return (value.length>5)
            }
          }
        },
        template:"<div>{{content}}</div>"
      })
      new Vue({
        el:"#root"
      })
    </script>

总结

以上所述是小编给大家介绍的vue中组件参数,希望对大家有所帮助,如果大家有任何疑问请给我留言,

小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
vue的$http的get请求要加上params操作
Nov 12 Javascript
微信小程序实现手指触摸画板
Jul 09 #Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 #Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 #Javascript
js中Object.defineProperty()方法的不详解
Jul 09 #Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 #Javascript
微信小程序实现倒计时补零功能
Jul 09 #Javascript
Angular6中使用Swiper的方法示例
Jul 09 #Javascript
You might like
解析php中call_user_func_array的作用
2013/06/07 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
使用Django和Python创建Json response的方法
2018/03/26 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
Python测试线程应用程序过程解析
2019/12/31 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
Pycharm github配置实现过程图解
2020/10/13 Python
应届大学生的推荐信
2013/11/20 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
不假外出检讨书
2014/01/27 职场文书
药品促销活动方案
2014/02/14 职场文书
2014年居委会工作总结
2014/12/09 职场文书
委托函范文
2015/01/29 职场文书
2014年个人年终总结
2015/03/09 职场文书
父母教会我观后感
2015/06/17 职场文书
创业计划书之酒厂
2019/10/14 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技
Redis数据同步之redis shake的实现方法
2022/04/21 Redis