slot插槽
一.插槽的基本使用
1.为什么要有插槽
不同的组件如果有很多相同的部分，又有自己不同的地方，提取相同的部分组成组件，就要用到插槽slot
2.基本使用
1.在子组件中定义slot槽
2.在使用此组件时在组件标签中定义不同的部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<cpn><button>按钮</button></cpn> //2.父组件中定义自己不同的部分，替换slot
<cpn><p>p标签</p></cpn>
<cpn><span>span标签</span></cpn>
<cpn></cpn> //不自定义不同，使用默认按钮
</div>
<template id="cpn_t">
<div>
我是子组件
<slot></slot> //1.在子组件中定义slot槽
//<slot><button>默认按钮</button></slot> //如果父组件不定义不同部分，则使用子组件的
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const cpn = {
template:"#cpn_t",
};
const app = new Vue({
el:"#div1",
components:{
cpn
}
})
</script>
</body>
</html>
效果如下图：
二.具名插槽的使用
具名插槽：顾名思义，就是有名称的插槽
具名插槽中也可定义默认标签，和普通插槽原理相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<cpn><button>按钮</button></cpn> //1.只能替代没有name值的slot
<cpn slot="first_slot"></cpn> //替换template中name为first_slot的插槽
</div>
<template id="cpn_t">
<div>
我是子组件
<slot name="first_slot"><button>插槽1</button></slot>
<slot name="second_slot"><button>插槽2</button></slot>
<slot></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const cpn = {
template:"#cpn_t",
};
const app = new Vue({
el:"#div1",
components:{
cpn
}
})
</script>
</body>
</html>
三.作用域插槽
子组件中，将数据传给父组件。父组件中使用子组件可以有不同的显示方式
此种子组件中为slot标签，界面会显示父组件中的span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<cpn>
<div slot-scope="slot"> //此处div标签可换成template标签
<span v-for="item in slot.data">{{item}} -</span>
</div>
</cpn>
</div>
<template id="cpn_t">
<div>
我是子组件:
<slot :data="CLanguage"> //此处:data可换成任意字符ab,父组件中使用slot.ab相应改变
<ul>
<li v-for="item in CLanguage">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const cpn = {
template:"#cpn_t",
data(){
return{
CLanguage:["Go","Python","JavaScript"]
}
}
};
const app = new Vue({
el:"#div1",
components:{
cpn
}
})
</script>
</body>
</html>
将slot改为scope可显示子标签中的li标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<cpn>
<div slot-scope="scope">
<button v-for="item in scope.data">{{item}} -</button>
</div>
</cpn>
</div>
<template id="cpn_t">
<div>
我是子组件:
<scope :data="CLanguage">
<ul>
<li v-for="item in CLanguage">{{item}}</li>
</ul>
</scope>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const cpn = {
template:"#cpn_t",
data(){
return{
CLanguage:["Go","Python","JavaScript"]
}
}
};
const app = new Vue({
el:"#div1",
components:{
cpn
}
})
</script>
</body>
</html>
总结：
1.匿名插槽和具名插槽都是父组件向子组件中传入数据，由子控件显示出来。作用域插槽几乎相反，是由子组件向父组件传入数据
2.具名插槽在子组件中写name属性，作用域插槽属性可随便
