组件基础（参数校验和动态组件、v-once）—Vue学习笔记
最最最后一点关于组件传值的问题。
提醒：本篇内容请使用Vue.js开发版！（附带完成的警告和提示）
1.组件的参数校验
父组件向子组件传值，子组件可以决定传值的一些限制。
比如，子组件指向接收String类型的值，在传递时props应该这样写：
<body>
<div id="app">
<hello content='hi boy'>
</hello>
</div>
</body>
<script>
Vue.component("hello",{
props:{
content:String//限制接收值的类型为字符串
}
},
template:'<div>{{content}}</div>'
}) var app=new Vue({
el:'#app'
})
</script>
PS：这里我们通过content进行传值。
<body>
<div id="app">
<hello content='hi boy'>
</hello>
</div>
</body>
直接子组件里使用 变量名=‘值’ 子组件接收到的时字符串。
使用 :变量名=‘数字’ 子组件可接收Number
<div id="app">
<hello :content='123'>
</hello>
</div>
关于参数校验，我们可以通过
直接限制类型（content:String）
数组形式（content:[String,Number]）
类content:{
typy:String,
required:true,//规定是否为必传参数
default:'默认值',//当为传入值时，默认为**
validator:function(value){//自定义校验器
return (value.length>5)//当大于5时返回true
}
}
例子：
<body>
<div id="app">
<hello content='hi boy'>
</hello>
</div>
</body>
<script>
Vue.component("hello",{
props:{
content:{
type:String,
required:false,//必传
default:'default value'//默认值
validator:function(value){
return (value.length>5)
}//通过校验器校验，要求长度大于五（满足条件返回true）
}
},
template:'<div>{{content}}</div>'
}) var app=new Vue({
el:'#app'
})
</script>
2.动态组件
通过 <component :is='组件名'></component> 来实现组件的动态切换。
例子：我们现在有两个组件chind-one和child-two通过按钮点击决定显示哪一个组件。(显示用v-if)
<body>
<div id="app">
<child-one v-if="type==='child-one'"></child-one>
<child-two v-if="type==='child-two'"></child-two> <button @click="handleClick">DoIt</button>
</div>
</body>
<script>
Vue.component("child-one",{
template:'<div>child-one</div>'
}) Vue.component("child-two",{
template:'<div>child-two</div>'
}) var app=new Vue({
el:'#app',
data:{
type:'child-one'
},
methods:{
handleClick:function(){
this.type=this.type==='child-one'?'child-two':'child-one'
}
}
})
</script>
这样我们就是先了点击按钮显示不同组件（三元表达式）
当然是一种静态的方法，现在改为动态，只需一句：
<div id="app">
<component :is="type"></component>
<button @click="handleClick">DoIt</button>
</div>
这里的type就是我们需要显示的组件名。
3.v-once指令
正如上面的例子，我们向实现两个组件的来回切换显示，Vue底层会为我们进行大量的工作区插入组件，删除组件。但是平凡的操作时很消耗性能的。
这时候，我们就需要用到v-once
Vue.component("child-one",{
template:'<div v-once>child-one</div>'//模板中添加v-once
})
这样当组件第一次生成时会存放到内存之中。避免重复创建，节省性能。
好了，这些时官方说明文档很少提到的（可能是我大意没看到），所以把它写下来。
如果要学习Vue.js的话还是推荐看一下官方API。
最近我也写了一个图片调用的Api，大约3万张左右的图片，包括风景大片，美女图片，动漫卡通，时尚炫酷，文字控以及小清新。
调用方法非常简单，返回参数无需过滤即可使用。
这里是链接YoungAm-图片Api
手机端还有一点小bau不影响使用。
不过，禁止恶意调用。
嘿嘿！
组件基础（参数校验和动态组件、v-once）—Vue学习笔记的更多相关文章
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- 组件基础—Vue学习笔记
ammm学习Vue有好几天了,今天遇到难点所以打算写一点随笔加深印象. 一.首先最简单的创建组件 1全局组件 Vue.component() Vue.component('hello',{ tem ...
- Vue组件（35）动态组件 component 的 is 到底可以是啥？
component 动态组件 Vue官网上提供了一个动态组件 <component :is="currentTabComponent"> ,那么这里的 is 到底是什么 ...
- 组件基础（非父子组件传值）—Vue学习笔记
最近几天忙着写Api去了,抽空把后面的内容下出来,然后再分享给大家web可以使用的api. 上次说了父子组件直接的传值,这次看一下非父子组件之间的传值(总线机制) 要实现非父子组件之间的传值非常重要的 ...
- Vue学习笔记（三）组件间如何通信传递参数
一:父组件向子组件传递参数 <template > <div id="app"> <h1 v-text="title">&l ...
- vue-父组件传递参数到子组件
案例: 父组件 <template> <div id="app"> <h1>vuex</h1> <h3>count:{{ ...
随机推荐
- Codeforces 1111 简要题解
文章目录 A题 B题 C题 D题 E题 传送门 A题 传送门 题意简述:把262626个英文字母分成两类A,BA,BA,B,AAA类字符可以转成AAA类字符,BBB类字符可以转成BBB类字符,问给出的 ...
- 2018.11.24 poj2774Long Long Message（后缀数组）
传送门 实际上可以用后缀自动机秒掉 当然后缀数组也挺好写. 我们将两个字符串接在一起,为了方便中间用一个特殊字符连接. 然后对新字符串求heightheightheight数组. 求出来之后对所有满足 ...
- 2018.10.31 NOIP训练 锻造（方程式期望入门题）（期望dp）
传送门 根据题目列出方程: fi=pi∗(fi−1+fi−2)+(1−pi)∗(fi+1+fi)f_i=p_i*(f_{i-1}+f_{i-2})+(1-p_i)*(f_{i+1}+f_i)fi=p ...
- 2018.10.26 bzoj2721: [Violet 5]樱花（数论）
传送门 推一波式子: 1x+1y=1n!\frac 1 x+\frac 1 y=\frac 1 {n!}x1+y1=n!1 =>xy−x∗n!−y∗n!xy-x*n!-y*n!xy−x∗n ...
- hdu-1800（字符串hash）
题目链接:传送门 思路: 就是找最多多少个扫帚,每个扫帚上有连续递增的序列,就是找一个最多重复数字的重复次数. 由于是30位,每次用char*类型,然后用hash映射一下,排序找最多就行了. 注意: ...
- dj django与ajax交互
Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数 ...
- Codeforces Round#416 Div.2
A. Vladik and Courtesy 题面 At regular competition Vladik and Valera won a and b candies respectively. ...
- C++对象模型：成员变量<一>非静态成员变量
非静态成员变量,分别两种可能,要么类自定义,要么继承而来.根据<深度探索C++对象模型>的解读. class X { private: int x,y,z; }; 在这个类中,有三个私有成 ...
- Ethernet II和802.3
在卷一中:(章节二:数据链路层) 在T C P / I P协议族中,链路层主要有三个目的: (1)为IP模块发送和接收IP数据报: (2 )为ARP模块发送ARP请求和接收ARP应答: (3 )为RA ...
- 前端- html 和css
html HTML 指超文本标签语言. HTML 是通向 WEB 技术世界的钥匙. html属性:所有标签的通用属性 html事件:On...html5加了很多事件 html视频/音频:处理音视频 h ...