最最最后一点关于组件传值的问题。
提醒:本篇内容请使用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不影响使用。
不过,禁止恶意调用。
嘿嘿!