Vue2.0 slot分发内容与props验证的方法

Vue2.0 slot分发内容与props验证的方法

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

Slot分发内容

概述：

简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。

默认情况下

父组件在子组件内套的内容，是不显示的。

例如代码：

http://12345

显示内容是一个button按钮，不包含span标签里面的内容；

一、单个slot

在子组件模板中有slot标签，被视为备用内容，在父组件不提供内容的情况下使用。如果父组件提供内容，则把整个内容片段插入到slot所在的DOM位置，并替换掉slot标签本身。

子组件模板中没有slot标签，父组件提供的内容会被抛弃

如果替换的内容较多，可以直接用一个template替换。

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

单个slot.png

二、有具体名称的slot

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

我替换two

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

具名slot.png

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

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

我替换two

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

匿名slot.png

三、编译作用域

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

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

{{message}}

页面渲染

编译作用域.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(){

retqfiJNyaurn 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++;

}

}

})

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。