详解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 相关文章推荐
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
在项目vue中使用echarts的操作步骤
Sep 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
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
jquery 选项卡效果 新手代码
2011/07/08 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
Python入门篇之文件
2014/10/20 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
Python之web模板应用
2017/12/26 Python
python如何读写json数据
2018/03/21 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
python随机取list中的元素方法
2018/04/08 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
Django 拆分model和view的实现方法
2019/08/16 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
大学毕业生的自我鉴定
2013/11/30 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android