最最最后一点关于组件传值的问题。

提醒：本篇内容请使用Vue.js开发版！（附带完成的警告和提示）

1.组件的参数校验

父组件向子组件传值，子组件可以决定传值的一些限制。

比如，子组件指向接收String类型的值，在传递时props应该这样写：

  1.  

<body>
<div id="app">
<hello content='hi boy'>
</hello>
</div>
</body>

  1. <script>
  2.     Vue.component("hello",{
  3.         props:{
  4.             content:String//限制接收值的类型为字符串
  5.             }
  6.         },
  7.         template:'<div>{{content}}</div>'
  8.     })
  9.  
  10.     var app=new Vue({
  11.         el:'#app'
  12.     })
  13. </script>

PS：这里我们通过content进行传值。

  1. <body>
  2.     <div id="app">
  3.         <hello content='hi boy'>
  4.         </hello>
  5.     </div>
  6. </body>

直接子组件里使用 变量名=‘值’ 子组件接收到的时字符串。

使用 :变量名=‘数字’ 子组件可接收Number

  1. <div id="app">
  2.     <hello :content='123'>
  3.     </hello>
  4. </div>

关于参数校验，我们可以通过

直接限制类型（content:String）

数组形式（content:[String,Number]）

类content:{

　　typy:String,

　　required:true,//规定是否为必传参数

　　default:'默认值',//当为传入值时，默认为**

　　validator:function(value){//自定义校验器

　　　　return (value.length>5)//当大于5时返回true

　　}

}

例子：

  1. <body>
  2.     <div id="app">
  3.         <hello content='hi boy'>
  4.         </hello>
  5.     </div>
  6. </body>
  7. <script>
  8.     Vue.component("hello",{
  9.         props:{
  10.             content:{
  11.                 type:String,
  12.                 required:false,//必传
  13.                 default:'default value'//默认值
  14.                 validator:function(value){
  15.                     return (value.length>5)
  16.                 }//通过校验器校验，要求长度大于五（满足条件返回true）
  17.             }
  18.         },
  19.         template:'<div>{{content}}</div>'
  20.     })
  21.  
  22.     var app=new Vue({
  23.         el:'#app'
  24.     })
  25. </script>

2.动态组件

通过　　<component :is='组件名'></component>　　来实现组件的动态切换。

例子：我们现在有两个组件chind-one和child-two通过按钮点击决定显示哪一个组件。(显示用v-if)

  1. <body>
  2.     <div id="app">
  3.         <child-one v-if="type==='child-one'"></child-one>
  4.         <child-two v-if="type==='child-two'"></child-two>
  5.  
  6.         <button @click="handleClick">DoIt</button>
  7.     </div>
  8. </body>
  9. <script>
  10.     Vue.component("child-one",{
  11.         template:'<div>child-one</div>'
  12.     })
  13.  
  14.     Vue.component("child-two",{
  15.         template:'<div>child-two</div>'
  16.     })
  17.  
  18.     var app=new Vue({
  19.         el:'#app',
  20.         data:{
  21.             type:'child-one'
  22.         },
  23.         methods:{
  24.             handleClick:function(){
  25.             this.type=this.type==='child-one'?'child-two':'child-one'
  26.             }
  27.         }
  28.     })
  29. </script>

这样我们就是先了点击按钮显示不同组件（三元表达式）

当然是一种静态的方法，现在改为动态，只需一句：

  1. <div id="app">
  2.         <component :is="type"></component>
  3.         <button @click="handleClick">DoIt</button>
  4.     </div>

这里的type就是我们需要显示的组件名。

3.v-once指令

正如上面的例子，我们向实现两个组件的来回切换显示，Vue底层会为我们进行大量的工作区插入组件，删除组件。但是平凡的操作时很消耗性能的。

这时候，我们就需要用到v-once

  1. Vue.component("child-one",{
  2.         template:'<div v-once>child-one</div>'//模板中添加v-once
  3.     })

这样当组件第一次生成时会存放到内存之中。避免重复创建，节省性能。

好了，这些时官方说明文档很少提到的（可能是我大意没看到），所以把它写下来。

如果要学习Vue.js的话还是推荐看一下官方API。

最近我也写了一个图片调用的Api，大约3万张左右的图片，包括风景大片，美女图片，动漫卡通，时尚炫酷，文字控以及小清新。

调用方法非常简单，返回参数无需过滤即可使用。

这里是链接YoungAm-图片Api

手机端还有一点小bau不影响使用。

不过，禁止恶意调用。

嘿嘿！

组件基础（参数校验和动态组件、v-once）—Vue学习笔记的更多相关文章

  1. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  2. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  3. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  4. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  5. 组件基础—Vue学习笔记

    ammm学习Vue有好几天了,今天遇到难点所以打算写一点随笔加深印象. 一.首先最简单的创建组件 1全局组件   Vue.component() Vue.component('hello',{ tem ...

  6. Vue组件（35）动态组件 component 的 is 到底可以是啥？

    component 动态组件 Vue官网上提供了一个动态组件 <component :is="currentTabComponent"> ,那么这里的 is 到底是什么 ...

  7. 组件基础（非父子组件传值）—Vue学习笔记

    最近几天忙着写Api去了,抽空把后面的内容下出来,然后再分享给大家web可以使用的api. 上次说了父子组件直接的传值,这次看一下非父子组件之间的传值(总线机制) 要实现非父子组件之间的传值非常重要的 ...

  8. Vue学习笔记（三）组件间如何通信传递参数

    一:父组件向子组件传递参数 <template > <div id="app"> <h1 v-text="title">&l ...

  9. vue-父组件传递参数到子组件

    案例: 父组件 <template> <div id="app"> <h1>vuex</h1> <h3>count:{{ ...

随机推荐

  1. 2018.11.05 NOIP模拟 相交（dfs序+bit）

    传送门 又TMTMTM考原题真是服. 考虑到两条路径相交一定满足某一条的lcalcalca在另外一条路径上面. 于是分开统计有多少个lcalcalca在当前路径上面以及有多少个路径经过了当前的lcal ...

  2. jquery删除onclick属性和设置onclick属性--获取验证码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 基础运动move.js

    /* * 事件绑定 */ function myAddEvent(obj,ev,fn){ if(obj.attachEvent){ obj.attachEvent('on' + ev,fn); }el ...

  4. asp.net上传文件夹

    最近公司做工程项目,实现文件夹上传. 网上找了一天,发现网上很多代码都存在相似问题,最后终于找到了一个符合要求的项目. 工程如下: 这里对项目的文件夹上传进行分析,实现文件夹上传,如何进行文件夹上传. ...

  5. 2.2.1synchronized方法的弊端

    缺陷:用关键字synchronized声明方法是有弊端的,譬如A线程调用同步方法执行一个长时间的任务,那么B线程则必须等待较长的时间, 解决方法:使用synchronized同步语句块 package ...

  6. Django-类视图与中间件

    ------类视图 1.类视图引入 def register(request): """处理注册"""   # 获取请求方法,判断是GET/ ...

  7. bzoj4873(最大权闭合子图)

    今天学了最大权闭合子图..然后找了这道题,发现完全不会..... 看了题解发现这种有诸如选了一个就一定要选另外的一些的限制又要求最优值的题有的可以转化成最大权闭合子图, 这个题我们首先想到不会选相交的 ...

  8. Qt_HelloWrold

    新建工程 -> 选择Qt Gui 应用 然后点击选择 在弹出的对话框中填写名称,创建路径等信息: 点击下一步,选择该工程的编译器. 点击下一步,可以选择生成的主窗口文件.不过这里我们仅仅用简单的 ...

  9. 周鸿祎与85后的座谈（一）：人人需要Mentor，世界没有奇迹

    我们公司现在有将近 4000 人,我觉得里面肯定是卧虎藏龙.百里挑一的话,也有 40 个伟大的人才.但是,即使是天才,如果没有前辈的帮助,最后也会变成庸才,是做不出什么大事的.举例来说,每一个跳水冠军 ...

  10. Hausdorff Distance(豪斯多夫距离)

    Hausdorff Distance(豪斯多夫距离) 参考博客:http://cgm.cs.mcgill.ca/~godfried/teaching/cg-projects/98/normand/ma ...