Que es una tragamonedas
La comprensión simple es "reemplazo", algunos contenidos específicos se pueden reemplazar cuando se utiliza el componente.
tal como:
- Algunos componentes son plantillas de diseño general y el contenido de cada pantalla no es fijo. En este momento, puede utilizar la función de ranura proporcionada por Vue
- La función de la ranura es reemplazar el elemento del componente con el contenido entrante, el contenido puede ser: texto, html, componente
注意：插槽的使用一般都在使用组件的时候
1. Uso de la ranura por primera vez
Algunos componentes son plantillas de diseño general y el contenido de cada pantalla no es fijo. En este momento, puede utilizar la función de ranura proporcionada por Vue
La función de la ranura es reemplazar el elemento del componente con el contenido entrante, el contenido puede ser: texto, html, otros componentes
El uso de slots es principalmente el uso de elementos. < slot />
第一步：在子组件的模板里定义个< slot />
<template id="component3">
<div>
<h1>哈哈</h1>
<slot> 我是默认值</slot>
</div>
</template>
第二步：在实例里把子组件component3注册上
const app = new Vue({
el: '#app',
components: {
'component1': {
template: "#component1"
},
'component2': {
template: "#component2"
},
'component3': {
template: "#component3"
}
}
})
第三步：使用组件
<!--不输入内容-->
<component1></component1>
<component3></component3>
inmediato:
Defina una ranura de elemento en el componente (puede haber contenido de respaldo, que es el valor predeterminado)
El contenido del elemento de la ranura puede tener contenido de respaldo, que es el valor predeterminado. Cuando el contenido de entrada está vacío, se puede mostrar el contenido de respaldo.
Si hay contenido de entrada, la ranura se reemplazará con el contenido de entrada y el contenido de la copia de seguridad no se mostrará
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello vue</title>
</head>
<body style="background-color: darkcyan">
<div id="app">
<!--不输入内容-->
<component1></component1>
<!--输入文本-->
<component1>输入的内容</component1>
<!--输入html-->
<component1><div><a href="https://www.baidu.com/">百度一下，你就知道</a></div></component1>
<!--输入其他组件-->
<component1><component2/></component1>
<!--输入的内容，<slot></slot>会替换成输入的内容 -->
</div>
<!--组件里定义一个元素slot（可以有后备内容，就是默认值）
slot元素内容，可以有后备内容，就是默认值，当输入内容为空的，可以显示后备内容，
如果有输入内容就会slot替换成输入内容，后备内容就不会显示
-->
<template id="component1">
<div>
<h2>组件1</h2>
<slot>默认值</slot>
</div>
</template>
<template id="component2">
<div style="background-color: #c2d5d5">
<h2>组件2</h2>
</div>
</template>
</body>
<script src="../css/vue.js"></script>
<script>
/**
* 有一些组件是一些通用的布局模板，每个展示的内容都不是固定，这时候就可以使用Vue提供的插槽功能
* 插槽的功能就是把组件的<slot>元素替换成传入的内容，内容可以是：文本，html，其他组件
*/
const app = new Vue({
el: '#app',
components: {
'component1': {
template: "#component1"
},
'component2': {
template: "#component2"
}
}
})
</script>
</html>
Dos ranuras con nombre
Como dije antes, algunos componentes son plantillas de diseño general, y el contenido a reemplazar es diferente. Debe especificar la posición de la ranura a reemplazar. En este momento, debe nombrar la ranura para distinguirla.
2.1 Usar atributo (atributo) en el elemento de ranura: nombre
<slot name="name1"></slot>
2.2 ¿Cómo colocar el contenido en la posición de ranura especificada?
Usar 指令v-slot和templatecombinación
<template v-slot:name1 >内容</template>
2.3 Usar ranuras con nombre
第一步：定义子组件模板
<template id="component1">
<div>
<div style="background-color: #b65757">
<h2>第1个插槽</h2>
<slot name="name1">第1个插槽</slot>
</div>
<div style="background-color: #7c9595">
<h2>第2个插槽</h2>
<slot name="name2">第2个插槽</slot>
</div>
</div>
</template>
第二步：在实例注册组件component1
<script>
const app = new Vue({
el: '#app',
components: {
'component1': {
template: "#component1"
}
}
})
</script>
第三步：在组件component1使用
<div id="app">
<!--不输入内容-->
<component1>
<template v-slot:name1 >
<h2>我是具名插槽1</h2>
</template>
<template v-slot:name2 >
<h2>我是具名插槽2</h2>
<div><a href="https://www.baidu.com/">百度一下，你就知道</a></div>
</template>
</component1>
</div>
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello vue</title>
</head>
<body style="background-color: darkcyan">
<div id="app">
<!--不输入内容-->
<component3>
<template v-slot:name1 >
<h2>我是具名插槽1</h2>
</template>
<template v-slot:name2 >
<h2>我是具名插槽2</h2>
<div><a href="https://www.baidu.com/">百度一下，你就知道</a></div>
</template>
</component3>
<component1></component1>
<!--输入文本-->
<component1>输入的内容</component1>
<!--输入html-->
<component1><div><a href="https://www.baidu.com/">百度一下，你就知道</a></div></component1>
<!--输入其他组件-->
<component1><component2/></component1>
<!--输入的内容，<slot></slot>会替换成输入的内容 -->
</div>
<!--组件里定义一个元素slot（可以有后备内容，就是默认值）
slot元素内容，可以有后备内容，就是默认值，当输入内容为空的，可以显示后备内容，
如果有输入内容就会slot替换成输入内容，后备内容就不会显示
-->
<template id="component1">
<div>
<h2>组件1</h2>
<slot>默认值</slot>
</div>
</template>
<template id="component3">
<div>
<div>
<h1>第1个插槽</h1>
<slot name="name1"> 第1个插槽</slot>
</div>
<div style="background-color: #7c9595">
<h2>第2个插槽</h2>
<slot name="name2">第2个插槽</slot>
</div>
</div>
</template>
<template id="component2">
<div style="background-color: #c2d5d5">
<h2>组件2</h2>
</div>
</template>
</body>
<script src="./vue.js"></script>
<script>
/**
* 有一些组件是一些通用的布局模板，每个展示的内容都不是固定，这时候就可以使用Vue提供的插槽功能
* 插槽的功能就是把组件的<slot>元素替换成传入的内容，内容可以是：文本，html，其他组件
*/
const app = new Vue({
el: '#app',
components: {
'component1': {
template: "#component1"
},
'component2': {
template: "#component2"
},
'component3': {
template: "#component3"
}
}
})
</script>
</html>
Tres, alcance de compilación y ranura de alcance
3.1 Alcance de la compilación
1) reglas de Vue
Hablando del alcance de la compilación, primero debemos entender una regla de Vue:
Reglas de Vue:父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的
2) Ejemplos
El primer paso: definir la plantilla de subcomponentes
<template id="component1">
<div style="background-color: #b65757">
<h2 v-show="isShow">组件1</h2>
<slot>默认值</slot>
</div>
</template>
Paso 2: registrar el componente 1 en la instancia
<script>
const app = new Vue({
el: '#app',
data:{
isShow: true
},
components: {
'component1': {
template: "#component1",
data() {
return {
isShow: false
};
}
},
})
</script>
Paso 3: utilice el componente component1
<div id="app">
<component1>
<h3 v-show="isShow">hello</h3>
</component1>
</div>
Visualización de resultados
El resultado de la pantalla es solo un hola
Debido al alcance de la compilación
- Cuando se usa el componente component1, isShow es el valor del atributo de datos de la instancia de la aplicación
- En el componente component1, isShow es el valor del atributo de datos del componente1 (no se muestra h2 en todas las plantillas)
3.2 Ranura de alcance
1) ¿Qué es una ranura de alcance?
Ranura de alcance, simplemente entiéndelo父级能用子组件数据来控制展示内容，数据源是子组件，父组件只是选择哪个展示
2) Ilustre el uso
El primer paso: utilice el método de enlace v-bind: nombre de atributo = valor de datos en la ranura de la plantilla de componente
<template id="component2">
<div style="background-color: #7c9595">
<slot>默认值1</slot>
<slot name="name1"
v-bind:message="message"
v-bind:message1="message1"
>
默认值2
</slot>
</div>
</template>
Paso 2: Registre el componente component2 en la instancia, el valor de datos de retorno es message y message1
<script>
const app = new Vue({
el: '#app',
components: {
'component2': {
template: "#component2",
data() {
return {
message: "我是子组件的内容",
message1: "message1"
};
}
}
}
})
</script>
Paso 3: usar en el componente
Cuando use componentes, use v-slot: name1 (nombre de la ranura con nombre) = "slotProps" en la plantilla, y el contenido se puede usar directamente:
atributo slotProps. (este atributo es slot con v-bind: nombre de atributo = valor de datos) para obtener los datos del subcomponente
- { {slotProps.message}}
- { {slotProps.message1}}
<div id="app">
<component2>
<template v-slot:name1="slotProps" >
<h2>{
{slotProps.message}}</h2>
<h2>{
{slotProps.message1}}</h2>
</template>
</component2>
</div>
[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-hotlinking, se recomienda guardar la imagen y cargarla directamente (img-aBbaXkvs-1612841995123) (vue note 03_files / 1.jpg)]
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello Vue</title>
</head>
<body>
<div id="app">
<component2>
<template v-slot:name1="slotProps" >
<h2>{
{slotProps.message}}</h2>
<h2>{
{slotProps.message1}}</h2>
</template>
</component2>
</div>
<template id="component2">
<div style="background-color: #CCCCCC">
<slot>默认值1</slot>
<slot name="name1"
v-bind:message="message"
v-bind:message1="message1"
>
默认值2
</slot>
</div>
</template>
</body>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
components: {
'component2': {
template: "#component2",
data() {
return {
message: "我是子组件的内容",
message1: "message1"
};
}
}
}
})
</script>
</script>
</html>
Cuatro, nombre de ranura dinámica
El nombre de la ranura dinámica es para controlar el nombre de la ranura a través del valor de atributo de los datos. Cuando se modifica el valor del atributo, la posición de reemplazo de la ranura también cambiará.
注意，不是cli构造的工程，使用驼峰命名会有问题，不能生效
Los ejemplos ilustran el uso de
第一步：定义组件模板
<template id="component1">
<div>
<div style="background-color: #b65757">
<slot name="name1">第1个插槽</slot>
</div>
<div style="background-color: #7c9595">
<slot name="name2">第2个插槽</slot>
</div>
</div>
</template>
第二步：实例注册组件component1
<script>
const app = new Vue({
el: '#app',
data:{
slotname: 'name1'
},
components: {
'component1': {
template: "#component1"
}
}
})
</script>
第三步：使用组件
<div id="app">
<component1>
<template v-slot:[slotname] >
<h2>我是动态插槽</h2>
</template>
</component1>
</div>
En la consola ponemos app.$data.slotname=‘name2’
[Error en la transferencia de la imagen del enlace externo. El sitio de origen puede tener un mecanismo de enlace anti-sanguijuela. Se recomienda guardar la imagen y subirla directamente (img-CWu6DbUT-1612841995125) (vue notes 03_files / 2.jpg)]
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello Vue</title>
</head>
<body>
<div id="app">
<component1>
<template v-slot:[slotname] >
<h2>我是动态插槽</h2>
</template>
</component1>
</div>
<template id="component1">
<div>
<div style="background-color: #b65757">
<slot name="name1">第1个插槽</slot>
</div>
<div style="background-color: #7c9595">
<slot name="name2">第2个插槽</slot>
</div>
</div>
</template>
</body>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
slotname: 'name1'
},
components: {
'component1': {
template: "#component1"
}
}
})
</script>
</html>
5. Abreviaturas de espacios con nombre
La abreviatura de la ranura nombrada, reemplazada por v-slot con #
注意没有插槽名字的时候要用：#default
<div id="app">
<component1>
<template v-slot:name1 >
<h2>我是具名插槽1</h2>
</template>
</component1>
<component1>
<!--具名插槽缩写，用#替换成v-slot-->
<template #name1 >
<h2>我是具名插槽2</h2>
</template>
</component1>
</div>