详解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 相关文章推荐
ajax java 实现自动完成功能
Dec 19 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
js实现百度搜索提示框
Feb 05 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
Element Rate 评分的使用方法
Jul 27 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分页函数代码(简单实用型)
2010/12/02 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
JavaScript 私有成员分析
2009/01/13 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
Python实现京东抢秒杀功能
2021/01/25 Python
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
大学生写自荐信的技巧
2014/01/08 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Python中基础数据类型 set集合知识点总结
2021/08/02 Python