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

提醒:本篇内容请使用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学习笔记的更多相关文章

  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. 取消IDEA中代码重复的检测

  2. jquery选择树:CheckTree 插件

    在做权限等提交的时候,需要用到选择树.比较了很多插件如:easyUI 树,ztree等等.本来决定自己写,但是到最后还是发现了checkTree这个插件.省了很多事情. 但是在引用过程中还是出现了一些 ...

  3. WebSocket 处理事件

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 W ...

  4. hdu-1033(格式)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1033 参考文章:https://blog.csdn.net/curson_/article/detai ...

  5. react native底部tab栏切换

    1.安装tab栏插件 npm i react-native-tab-navigator --save 2.引入对应的组件和tab插件 import { Platform, StyleSheet, Te ...

  6. Mybatis-Plus 实战完整学习笔记(九)------条件构造器核心用法大全(上)

    一.Mybatisplus通用(公共方法)CRUD,一共17种(3.0.3版),2.3系列也是这么多,这个新版本一定程度进行了改造和删减. 二.构造器UML图(3.0.3)-----实体包装器,主要用 ...

  7. IntelliJ IDEA 2017版 spring-boot2.0.4的集成JSP

    一.必须依赖四个包,其中三个是springboot自带包,可以不写版本号,有一个不在springboot中,需要设置版本号 <!--引入Spring Boot内嵌的Tomcat对Jsp的解析包- ...

  8. MapGIS10.3新功能

    智能的GIS 支持开放的数据集.数据库.等等 T-C-V 软件结构是继局部网软件的 C/S 结构,互联网软件的 B/S 结构发展起来的适合云 计算.云服务的新一代软件三层结构,分别为终端应用层(T 层 ...

  9. 修改input标签type=file类型的文字

    <form name="form" id="form" method="post" enctype="multipart/f ...

  10. jvm虚拟机--堆内存

    reserved 保留区域 堆 所有对象实例都在这里分配内存. 是垃圾收集的主要区域("GC 堆").现代的垃圾收集器基本都是采用分代收集算法,主要思想是针对不同的对象采取不同的垃 ...