slot插槽（有默认值，也有名称）一般情况下通过名称进行匹配
什么是插槽，有什么用？插槽相当于插入的一个东西，可以用来灵活的封装组件，比如说封装一个模态框
对组件进行内容的定制，slot插槽，一对组件标签中的结构，最终会被插入到组件的模板中去的
使用方法思路：子组件定义完成。需要灵活的改变子组件里面的东西。可以在子组件注册的标签里面写<slot></slot>来完成内容替换，当然有name来进行标识是最好的
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<modal>
<h1 slot="title">{{title}}</h1>
<div slot="content">
<p>1</p>
<p>2</p>
<div>我是插件的内容部分</div>
</div>
</modal>
</div>
</body>
<script src="vue.js"></script>
<script>
/*
对组件进行内容的定制
slot插槽
一对组件标签中的结构，最终会被插入到组件的模板中
*/
Vue.component(‘modal‘,{
data(){
return {
title:"modal的标题"
}
},
template:`
<div class="box">
<div class="title">
<slot name="title"></slot>
</div>
<div class="content">
<slot name="content"></slot>
</div>
<div class="footer">
我是一个底部
</div>
</div>
`
})
new Vue({
el:"#app",
data(){
return {
title:‘父组件title插槽‘
}
}
})
</script>
<style>
.box{
font-size:14px;
width: 400px;
height: 260px;
border:2px solid #F60;
margin:0px auto;
}
.title{
border-bottom:1px solid #999;
}
.content{
border-bottom:1px solid #999;
}
</style>
</html>
原文地址：https://www.cnblogs.com/chengxiang123/p/8654659.html
时间： 2024-11-09 06:03:09