Índice
- Slots
- Slots básicos
- Slots con Element UI
- Uso múltiple de slots
Slots
Los slots son componentes integrados en Vue que sirven como puntos de entrada para disrtibuir contenido.
Slots básicos
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Uso de slots</title>
</head>
<body>
<div id="app"></div>
<script src="./vue.js"></script>
<script>
// Componente global
Vue.component('CustomButton', {
template: `
<button>
<slot></slot>
</button>
`
});
var Header = {
data() {
return {}
},
template: `
<div>Componente de encabezado</div>
`
};
var Content = {
data() {
return {}
},
template: `
<div>Componente de contenido
<CustomButton>Iniciar sesión</CustomButton>
<CustomButton>Registrarse</CustomButton>
<CustomButton>123</CustomButton>
</div>
`
};
var Sidebar = {
data() {
return {}
},
template: `
<div>Barra lateral</div>
`
};
var App = new Vue({
el: '#app',
data() {
return {}
},
components: {
Header,
Content,
Sidebar
},
template: `
<div>
<Header></Header>
<Content></Content>
<Sidebar></Sidebar>
</div>
`
})
</script>
</body>
</html>
Slots con Element UI
Código para obtener estilos de botones de Element UI y aplicarlos mediante slots:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Uso de slots</title>
<style>
.default {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
.primary {
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
.success {
color: #fff;
background-color: #67c23a;
border-color: #67c23a;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="./vue.js"></script>
<script>
// Componente global
Vue.component('CustomButton', {
template: `
<button class="default" :class="typeClass">
<slot></slot>
</button>
`,
props: {
typeClass: {
type: String,
}
}
});
var Header = {
data() {
return {}
},
template: `
<div>Componente de encabezado</div>
`
};
var Content = {
data() {
return {}
},
template: `
<div>Componente de contenido
<CustomButton typeClass="primary">Botón principal</CustomButton>
<CustomButton typeClass="success">Botón exitoso</CustomButton>
</div>
`
};
var Sidebar = {
data() {
return {}
},
template: `
<div>Barra lateral</div>
`
};
var App = new Vue({
el: '#app',
data() {
return {}
},
components: {
Header,
Content,
Sidebar
},
template: `
<div>
<Header></Header>
<Content></Content>
<Sidebar></Sidebar>
</div>
`
})
</script>
</body>
</html>
Múltiples slots
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
</head>
<body>
<div id="app"></div>
<script src="./vue.js"></script>
<script>
// Definición del componente global
Vue.component('ListItem', {
template: `
<li>
Primer espacio reservado
<slot name="second"></slot>
Segundo espacio reservado
<slot name="third"></slot>
</li>
`
});
var App = {
template: `
<div>
<ul>
<ListItem>
<h2 slot="second">Primer espacio</h2>
<h2 slot="third">Segundo espacio</h2>
</ListItem>
</ul>
</div>
`
};
new Vue({
el: '#app',
components: {
App
},
template: `<App/>`
})
</script>
</body>
</html>