Directorio de artículos
prefacio
Este artículo presenta brevemente el uso de ranuras con nombre y ranuras con ámbito.
1. ¿Qué es una tragamonedas?
1. Un espacio es un marcador de posición en un componente secundario que se proporciona al componente principal. Está representado por < slot>< /slot > en el componente secundario. El componente principal puede llenar cualquier código de plantilla en este marcador de posición, como HTML , componentes, etc., el contenido rellenado reemplazará las etiquetas < slot>< /slot > de los subcomponentes. (Simplemente hablando, es cavar un agujero en el subcomponente para que otros salten)
2. Después de la versión 2.6.0, slot y slot-scope se reemplazan por v-slot.
3. Las ranuras incluyen ranuras predeterminadas, ranuras con nombre y ranuras con ámbito
2. Preparación preliminar
1、通过vue-cli创建好初始化项目
2、src下创建category.vue，同时在App.vue中引入
3. Uso de espacios con nombre
1. Ranura de configuración de subcomponentes
Configure accesorios en el componente secundario, reciba información de la aplicación del componente principal y prepare dos ranuras:
//category.vue
<template>
<div id="bck">
<h3>{
{
title }}</h3>
//准备两个带有不同name的插槽（可以让使用者在指定的地方显示数据）
<slot name="center">默认插槽1</slot>
<slot name="footer">默认插槽2</slot>
</div>
</template>
<script>
export default {
name: "category",
data() {
return {
};
},
props: ["title", "listData"],
};
</script>
<style scoped>
#bck {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: #bfa;
}
</style>
2. Datos de configuración de App.vue del usuario
A través de los diferentes nombres definidos en la categoría del subcomponente, los datos se pueden mostrar en la ubicación especificada:
//App.vue
<template>
<div id="app">
<category title="美食">
<img
slot="center"
src="https://tse2-mm.cn.bing.net/th/id/OIP-C.wwyQPKyRH0ge8-Ppd9DSJgHaEK?w=317&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"
alt=""
/>
<a slot="footer" href="https://img1.qunarzz.com/travel">更多</a>
</category>
<category title="游戏">
<ul slot="center">
<li v-for="(g, index) in game" :key="index">{
{
g }}</li>
</ul>
<div id="game" slot="footer">
<a href="https://img1.qunarzz.com/travel">单机游戏</a>
<a href="https://img1.qunarzz.com/travel">网络游戏</a>
</div>
</category>
<category title="电影">
<video
slot="center"
width=""
height=""
controls
src="https://v.qq.com/x/cover/mzc00200dwnknik.html"
></video>
<div id="game" slot="footer">
<a href="https://img1.qunarzz.com/travel">更多信息1</a>
<a href="https://img1.qunarzz.com/travel">更多信息2</a>
</div>
</category>
</div>
</template>
<script>
import category from "./components/category";
export default {
name: "app",
data() {
return {
foods: ["麻辣烫", "烧烤", "小青龙", "炸酱面"],
game: ["魔兽世界", "FIFA2016", "NBA2K", "洛克王国"],
};
},
mounted() {
},
methods: {
},
components: {
category,
},
};
</script>
<style scoped>
#app,
#game {
display: flex;
justify-content: space-around;
}
img {
width: 100%;
}
video {
width: 100%;
}
</style>
3. Visualización de resultados
4. Resumen de las franjas horarias nombradas
1. Después de definir la ranura de la ranura, agregue slot="name" a la etiqueta que se mostrará, y el contenido que se mostrará se puede mostrar en la posición especificada. 2. Al mismo tiempo, se debe tener en cuenta que los datos de la ranura de este
método El juego de origen se proporciona en el componente principal de la aplicación, no en el componente secundario en sí. Para reducir la redundancia, las ranuras con ámbito se pueden usar para almacenar datos en el componente que define la ranura en sí.
En cuarto lugar, el uso de ranuras de alcance
- Requiere que los datos a mostrar estén colocados en el precio del grupo que define el slot
- El componente principal App.vue solo genera la estructura en función de los datos, y los datos se proporcionan en el componente que define la ranura.
1. Ranura de configuración de subcomponentes
Los accesorios configurados en componentes secundarios solo necesitan recibir encabezados. Prepare dos ranuras con alcance y lleve los datos para mostrar:
//category.vue
<template>
<div id="bck">
<h3>{
{
title }}</h3>
<slot :G="games" :F="foods">作用域插槽</slot>
</div>
</template>
<script>
export default {
name: "category",
data() {
return {
foods: ["麻辣烫", "烧烤", "小青龙", "炸酱面"],
games: ["魔兽世界", "FIFA2016", "NBA2K", "洛克王国"],
};
},
props: ["title"],
};
</script>
<style scoped>
#bck {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: #bfa;
}
</style>
2. El usuario recibe los datos y establece la estructura
//App.vue
<category title="游戏">
<template scope="zwt">
<!--ES6解构赋值，{
}直接拿到zwt.G的值 -->
<ul>
<li v-for="(g, index) in zwt.G" :key="index">{
{
g }}</li>
</ul></template
>
</category>
<category title="美食">
<template scope="{F}">
<!--ES6解构赋值，{
}直接拿到zwt.F的值 -->
<ol >
<li v-for="(f, index) in F" :key="index">{
{
f}}</li>
</ol>
</template>
</category>
3. Visualización de resultados
4. Resumen de ranuras de alcance
1. Puede resolver el problema de que no hay datos para mostrar en el componente de usuario, y puede usarse para llamar datos de otros componentes.
2. El componente que define la ranura transmite sus propios datos al usuario, y el usuario configura la estructura después de recibir los datos.
3. El usuario solo determina el estilo de la estructura generada y los datos se transmiten desde el usuario (el componente que define la ranura).
4. Se puede entender que la ranura significa que el componente principal inserta una estructura específica en la posición especificada del componente secundario.