Vue中插槽理解以及使用方法
什么是插槽?
插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。
插槽的三种使用方法
1.普通插槽
插槽允许我们在调用子组件的时候为子组件传递模板。
<div id='app'>
<test>
<template >{{msg}}</template>
</test>
<test>
<template>world</template>
</test>
</div>
//子组件
let test = {
template:`
<div>
<div>
<!-- 普通插槽-->
<slot></slot>
</div>
</div>
`,
}
//根组件
new Vue({
el:'#app',
components:{
test
},
data:{
msg:'world'
}
})
2.具名插槽
在一个组件中有多个插槽,调用的时候为了给不同的组件传递参数就需要为插槽进行命名。
<div id='app'>
<test>
<!-- 告诉模版传递参数到哪一个插槽中,通过插槽的名字,进行唯一的确认 -->
<template v-slot:two>{{msg}}</template>
</test>
<test>
<template v-slot:one>world</template>
</test>
</div>
let test={
template:`
<div>
<div>
<!-- 给插槽进行命名 -->
<slot name='one'></slot>
</div>
<div>
<slot name='two'></slot>
</div>
</div>
`
}
new Vue({
el:'#app',
components:{
test
},
data:{
msg:'hello'
}
})
- 作用域插槽
在一个组件中有多个插槽,调用的时候为了给不同的组件传递参数就需要为插槽进行命名。
<div id='app'>
<!-- <test>
告诉模版传递参数到哪一个插槽中,通过插槽的名字,进行唯一的确认 -->
<!--<template v-slot:default='aaa'>{{aaa}}
</template>
</test> -->
<!-- 将其结构 -->
<test v-slot='{user,form}'>
<template >
{{user}}
{{form}}
</template>
</test>
</div>
let test={
template:`
<div>
<div>
<slot v-bind:form='form' v-bind:user='user'></slot>
</div>
</div>
`,data(){
return {
form:{
username:'tom',
age:12
},
user:'zs'
}
}
}
new Vue({
el:'#app',
components:{
test
},
data:{
msg:'hello'
}
})