详解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 对象的创建与使用
Mar 09 Javascript
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
Ext 今日学习总结
Sep 19 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
JS触摸与手势事件详解
May 09 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 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
phpmyadmin的#1251问题
2006/11/25 PHP
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
PHP 采集获取指定网址的内容
2010/01/05 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
php中smarty区域循环的方法
2015/06/11 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
iframe实用操作锦集
2014/04/22 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
javascript截取字符串小结
2015/04/28 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
layui导航栏实现代码
2017/05/19 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
如何使用Python 打印各种三角形
2019/06/28 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
Python 实现一个计时器
2020/07/28 Python
一道写SQL的面试题和答案
2013/11/19 面试题
网络工程师的自我评价
2013/10/02 职场文书
体育个人工作总结
2015/02/09 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
Java使用Unsafe类的示例详解
2021/09/25 Java/Android