组件基础（参数校验和动态组件、v-once）

组件基础（参数校验和动态组件、v-once）—Vue学习笔记

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

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

1.组件的参数校验

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

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

<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不影响使用。

不过，禁止恶意调用。

嘿嘿！