Vue2.0系列(五)slot分发内容与props验证

使用一种方式混合父组件的内容与子组件自己的模板,这个过程被称为“内容分发”。在子组件中使用特殊的元素作为内容的插槽。

一、单个slot

在子组件模板中有slot标签,被视为备用内容,在父组件不提供内容的情况下使用。如果父组件提供内容,则把整个内容片段插入到slot所在的DOM位置,并替换掉slot标签本身。
子组件模板中没有slot标签,父组件提供的内容会被抛弃
如果替换的内容较多,可以直接用一个template替换。

自定义组件

我是父组件提供的内容,我的存在会替换子组件中slot标签内的内容

见证奇迹的时候到了,页面上会显示如下内容


Vue2.0系列(五)slot分发内容与props验证_第1张图片
单个slot.png

二、有具体名称的slot

元素可以用一个特殊的属性name来配置如何分发内容。

自定义组件

我替换three
我替换two
我替换two
我替换one

你猜页面上会显示什么?猜对了我就告诉你-。-


Vue2.0系列(五)slot分发内容与props验证_第2张图片
具名slot.png

是不是被顺序惊到了,这是因为页面会根据子组件中slot的顺序去替换内容并渲染页面。

可以使用一个匿名的slot,处理那些没有对应slot的内容

    

自定义组件

我替换three
我替换two
我替换two
我替换one
替换无名的slot
替换无名的slot
替换无名的slot

匿名的slot就会被那些没有对应slot的内容替换。


Vue2.0系列(五)slot分发内容与props验证_第3张图片
匿名slot.png

三、编译作用域

父组件模板的内容在父组件作用域内编译
子组件模板的内容在子组件作用域内编译

自定义组件

{{message}}

页面渲染


Vue2.0系列(五)slot分发内容与props验证_第4张图片
编译作用域.png

运用了slot分发,使我们对组件的应用更加灵活。

单向数据流

数据从父组件传递给子组件,只能单项绑定。
在子组件内不应该修改父组件传递过来的数据。
改变prop的情况:
1.作为data中局部数据的初始值使用
2.作为子组件中computed属性

props 验证

我们在父组件给子组件传值得时候,为了避免不必要的错误,可以给prop的值进行类型设定,让父组件给子组件传值得时候,更加准确

     props:{
        propA:Number, 数值类型
        propB:[String,Number],  多种类型
        propC:{type:String,required:true},   必填项
        propD:{type:Number,default:100},   默认是
        propE:{typr:Number,default:function(){return 1000}}
        propF:{validator:function(value){return value>2}}  符合value>2的值
     }

不明白,看如下案例,要求父组件给子组件传值得时候
1、这个参数是必须传的
2、值必须是数值类型的
3、默认参数是10

    Vue.component('custom-cmpontent',{
        data(){
            return {
                incrementCount:this.count //作为局部组件的data的初始值
            }
        },
        props:{
            count:{
                type:Number,   // 类型
                default:10,    // 默认值
                required:true  //必须要传参数
            }
        },
        computed:{
            incrementCount2(){
                return this.incrementCount
            }
        },
        template:`
                

我是一个自定义组件

{{incrementCount}}
`, methods:{ changeCount:function(value){ this.incrementCount++; this.$emit('receive') } } }) new Vue({ el:"#app", data:{ count:0 }, methods:{ countH:function(){ this.count++; } } })

那如果我们给子组件传值得时候,传过去的是一个字符串,就会报错

prop验证

你可能感兴趣的