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

提醒：本篇内容请使用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. 
						
  2. vue学习笔记(九)vue-cli中的组件通信
		
    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
    
		
    3. 
						
  3. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
		
    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
    
		
    4. 
						
  4. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
		
    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
    
		
    5. 
						
  5. 组件基础—Vue学习笔记
		
    ammm学习Vue有好几天了,今天遇到难点所以打算写一点随笔加深印象. 一.首先最简单的创建组件 1全局组件   Vue.component() Vue.component('hello',{ tem ...
    
		
    6. 
						
  6. Vue组件（35）动态组件 component 的 is 到底可以是啥？
		
    component 动态组件 Vue官网上提供了一个动态组件 <component :is="currentTabComponent"> ,那么这里的 is 到底是什么 ...
    
		
    7. 
						
  7. 组件基础（非父子组件传值）—Vue学习笔记
		
    最近几天忙着写Api去了,抽空把后面的内容下出来,然后再分享给大家web可以使用的api. 上次说了父子组件直接的传值,这次看一下非父子组件之间的传值(总线机制) 要实现非父子组件之间的传值非常重要的 ...
    
		
    8. 
						
  8. Vue学习笔记（三）组件间如何通信传递参数
		
    一:父组件向子组件传递参数 <template > <div id="app"> <h1 v-text="title">&l ...
    
		
    9. 
						
  9. vue-父组件传递参数到子组件
		
    案例: 父组件 <template> <div id="app"> <h1>vuex</h1> <h3>count:{{ ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. linux_配置三台虚拟机免密登录
			
    在node01上面直接生成公钥和私钥 ssh-keygen --> 四下回车 ll -a 进行查看,发现出现.ssh文件即已经生成 将此node01的公钥拷贝到第二台机器上 ssh-copy-i ...
    
			
    2. 
						
  2. 25、UIView的setNeedsLayout, layoutIfNeeded 和 layoutSubviews 方法之间的关系解释
			
    layoutSubviews总结 ios layout机制相关方法 - (CGSize)sizeThatFits:(CGSize)size- (void)sizeToFit——————- - (voi ...
    
			
    3. 
						
  3. 2019.01.22 SCU4444 Travel（最短路+bfs）
			
    传送门 题意简述:给出一张nnn个点的完全图,有mmm条边边权为aaa其余点边权为bbb,问从111到nnn的最短路. 思路:分类讨论一波即可. (1,n)(1,n)(1,n)的边权为aaa,那么只用 ...
    
			
    4. 
						
  4. codeforces题目合集（持续更新中）
			
    CF280CCF280CCF280C 期望dp CF364DCF364DCF364D 随机化算法 CF438DCF438DCF438D 线段树 CF948CCF948CCF948C 堆 CF961EC ...
    
			
    5. 
						
  5. hdu-1034（模拟+小朋友分糖）
			
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1034 参考文章:https://blog.csdn.net/zyy173533832/article/ ...
    
			
    6. 
						
  6. Java数组的初始化
			
    1.动态初始化 数据类型 [] 变量名 = new 数据类型 [数组大小]; //数组的动态初始化 int [] arr = new int [3]; 2.静态初始化 数据类型 [] 变量名 = {元 ...
    
			
    7. 
						
  7. AI学习经验总结
			
    我的人工智能学习之路-从无到有精进之路 https://blog.csdn.net/sinox2010p1/article/details/80467475 如何自学人工智能路径规划(附资源,百分百亲 ...
    
			
    8. 
						
  8. 使用Wireshark分析网络数据
			
    一. Wireshark中查看TCP的三次握手和四次挥手: 上面的数据发送和接收两部分的info提示都是 [TCP segment of a reassembled PDU],网上的解释是TCP分片的 ...
    
			
    9. 
						
  9. C++STL queue
			
    queue队列 先进先出 queue<int> q1; q1.push();//插入元素 q1.front();//求队头元素 q1.pop();//删除队头元素 q1.empty();/ ...
    
			
    10. 
						
  10. 理解-const
			
    c++ 中const和c中define的区别 (1) 编译器处理方式不同 define宏是在预处理阶段展开. const常量是编译运行阶段使用. (2) 类型和安全检查不同 define宏没有类型,不 ...
    
			
    11.