插槽:
子组件中提供给父组件使用的一个占位符,
父组件不仅可以往插槽中插入值类型,也可以插入任何模板代码
我们插入的代码,会自动替代子标签
(白话,就是给你一个坑,父组件传一个东西(值,其他模板代码)过来,我给你放在那里)
插槽种类:
- 匿名插槽
- 具名插槽
- 作用域插槽
匿名插槽
在template中定义slot标签,然后在div#app中就可以写数据, 此为匿名插槽
步骤:
在组件的template中,定义插槽
<template id="temp">
<div>
this is a children template
<br>
<slot>
</slot>
</div>
</template>
<script>
Vue.component("rin",{
template:"#temp"
})
在使用组件时,传入对应的值即可
<div id="app">
<rin>
插槽的位置,谁敢动
</rin>
</div>
具名插槽
具名插槽就是有名字的插槽
1.在template的slot标签中,使用name属性定义slot名称
2.在主标签中对应的插槽数据中,使用v-slot指定插槽
3.具名插槽必须放在template中,并由template使用v-slot指令指定插槽
4.如果两个插槽名称一致,那么可以在上端一次输入数据,在组件中一起使用
5.插槽的位置顺序,由tempalte决定。
6插槽可以有多个插槽,且可以放在不同的位置
步骤:
在template中定义slot的位置和名称
<template id="temp">
<div>
<slot name="slot1"></slot>
<p>这是组件的身体</p>
<slot name="slot2"></slot>
</div>
</template>
<script>
Vue.component("rin", {
template: "#temp"
})
</script>
使用时,使用v-slot传递不同的slot,并定义名称,此处的先后顺序与展示数据无关
<div id="app">
<rin>
<template v-slot:slot1>
<h1>这是插槽1的数据</h1>
</template>
<template v-slot:slot2>
<h1>这是插槽2的数据</h1>
</template>
</rin>
</div>
默认插槽
- 所谓默认插槽,就是在组件中只申明了插槽标签,没有绑定固定名称(且一定是)。
- 此时可以在div#app标签中,新建一个template且无v-slot指定。(也可以直接写数据,template也不写)
- 当在template中,写了多个默认插槽时,默认插槽的数据会一一填充上去
- 同上,如果在div#app定义了多个插槽的数据,也会一一填充到template中
此处就是一个组件中定义了两个默认slot
<template id="temp">
<div>
<slot name="slot1"></slot>
<p>这是组件的身体</p>
<slot name="slot2"></slot>
<slot></slot>
<slot></slot>
</div>
</template>
<script>
Vue.component("rin", {
template: "#temp"
})
使用的时候,默认用写上去即可,只是不需要绑定名称
<div id="app">
<rin>
<template v-slot:slot1>
<h1>这是插槽1的数据</h1>
</template>
<template v-slot:slot2>
<h1>这是插槽2的数据</h1>
</template>
<!-- 默认插槽 -->
<template>
<div>哈哈哈1</div>
</template>
<template>
<div>哈哈哈2</div>
</template>
</rin>
</div>
作用域插槽
作用域插槽内,父组件可以拿到子组件的数据。子组件可以在slot标签上绑定属性值
理解上其实就是:作用域插槽就是带有数据的插槽
1.定义了一个组件,且给组件定义了部分数据
一个user,一个user的list
Vue.component("rin", {
template: "#temp",
data() {
return {
user: {
name: "liubi",
age: 10
},
users: [{
name: "rin",
age: 24
},
{
name: "sister",
age: 10
},
{
name: "may",
age: 16
},
]
}
}
})
2.定义插槽:
在组件绑定的template中,slot使用v-for或者:加属性名的方式绑定数据
<template id="temp">
<div>
<!-- 1.因为template不支持大写,所以定义userinfo也不能出现骆驼式命名,还必须小写
2.对插槽进行命名时,若是使用-的称呼,则tempalte中,也必须写area-slot,否则也会无效
-->
<!-- 1.传递对象 -->
<slot name="area-slot" :user-info="user"></slot>
<!-- 传递对象里面的值 -->
<slot name="area-slot1" :username="user.name" :age="user.age"></slot>
<slot name="area-slot2" v-for="user in users" :username="user.name" :age="user.age"></slot>
</div>
</template>
注意:1.对插槽进行命名时,若是使用-的称呼,则tempalte中,也必须写area-slot,否则也会无效
2.因为template不支持大写,所以定义userinfo也不能出现骆驼式命名,还必须小写
3.组件中使用插槽
使用scope绑定数据,然后输出数据内容
<div id="app">
<rin>
<!-- 此处绑定slot(作用域插槽)时,不能像具名插槽一样,使用v-slot,只能用slot来绑定slot名称 -->
<template slot="area-slot" slot-scope="data">
<!-- 1.当slot的属性user-info使用了-时,此处data的数据还必须大写
当然,也可以user-info直接写成userinfo,那此处也可以写成userinfo -->
{{data.userInfo.name}}
</template>
<!-- 绑定值 -->
<template slot="area-slot1" slot-scope="data">
{{data.username}}--{{data.age}}
</template>
<!-- 遍历对象 -->
<template slot="area-slot2" slot-scope="data">
<h1>{{data.username}}--{{data.age}}</h1>
</template>
</rin>
</div>
注意:此处与步骤二相关联,当步骤二定义插槽时,此处使用user-info,那么步骤三使用插槽遍历数据时候,还必须得使用大写
全代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> -->
<script src="vue.min.js"></script>
<title>作用域插槽</title>
</head>
<body>
<!-- 1.作用域插槽其实就是带有数据的插槽 -->
<div id="app">
<rin>
<!-- 此处绑定slot(作用域插槽)时,不能像具名插槽一样,使用v-slot,只能用slot来绑定slot名称 -->
<template slot="area-slot" slot-scope="data">
<!-- 1.当slot的属性user-info使用了-时,此处data的数据还必须大写
当然,也可以user-info直接写成userinfo,那此处也可以写成userinfo -->
{{data.userInfo.name}}
</template>
<!-- 绑定值 -->
<template slot="area-slot1" slot-scope="data">
{{data.username}}--{{data.age}}
</template>
<!-- 遍历对象 -->
<template slot="area-slot2" slot-scope="data">
<h1>{{data.username}}--{{data.age}}</h1>
</template>
</rin>
</div>
<template id="temp">
<div>
<!-- 1.因为template不支持大写,所以定义userinfo也不能出现骆驼式命名,还必须小写
2.对插槽进行命名时,若是使用-的称呼,则tempalte中,也必须写area-slot,否则也会无效
-->
<!-- 1.传递对象 -->
<slot name="area-slot" :user-info="user"></slot>
<!-- 传递对象里面的值 -->
<slot name="area-slot1" :username="user.name" :age="user.age"></slot>
<slot name="area-slot2" v-for="user in users" :username="user.name" :age="user.age"></slot>
</div>
</template>
<script>
Vue.component("rin", {
template: "#temp",
data() {
return {
user: {
name: "liubi",
age: 10
},
users: [{
name: "rin",
age: 24
},
{
name: "sister",
age: 10
},
{
name: "may",
age: 16
},
]
}
}
})
var vm = new Vue({
el: "#app",
});
</script>
</body>
</html>