What is a slot
The simple understanding is "replacement", some specified content can be replaced when using the component
such as:
- Some components are general layout templates, and the content of each display is not fixed. At this time, you can use the slot function provided by Vue
- The function of the slot is to replace the element of the component with the incoming content, the content can be: text, html, component
注意：插槽的使用一般都在使用组件的时候
1. Using the slot for the first time
Some components are general layout templates, and the content of each display is not fixed. At this time, you can use the slot function provided by Vue
The function of the slot is to replace the element of the component with the incoming content, the content can be: text, html, other components
The use of slots is mainly to use elements < 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>
prompt:
Define an element slot in the component (there can be backing content, which is the default value)
The slot element content can have backup content, which is the default value. When the input content is empty, the backup content can be displayed.
If there is input content, slot will be replaced with input content, and the backup content will not be displayed
Example:
<!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>
Two, named slots
As I said before, some components are general layout templates, and the content to be replaced is different. You need to specify the slot position to be replaced. At this time, you need to name the slot to distinguish it.
2.1 Use attribute (attribute) on the slot element: name
<slot name="name1"></slot>
2.2 How to put the content in the specified slot position?
Use 指令v-slot和templatecombination
<template v-slot:name1 >内容</template>
2.3 Use named slots
第一步：定义子组件模板
<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>
Example:
<!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>
Three, compile scope and scope slot
3.1 Compilation scope
1) Vue rules
Speaking of compilation scope, we must first understand a Vue rule:
Vue rules:父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的
2) Examples
Step 1: Define the sub-component template
<template id="component1">
<div style="background-color: #b65757">
<h2 v-show="isShow">组件1</h2>
<slot>默认值</slot>
</div>
</template>
Step 2: Register component1 on the instance
<script>
const app = new Vue({
el: '#app',
data:{
isShow: true
},
components: {
'component1': {
template: "#component1",
data() {
return {
isShow: false
};
}
},
})
</script>
Step 3: Use component component1
<div id="app">
<component1>
<h3 v-show="isShow">hello</h3>
</component1>
</div>
Display of results
The display result is only one hello
Because of the compilation scope
- When using component component1, isShow is the value of the data attribute of the app instance
- In component component1, isShow is the value of the data attribute of component1 (h2 in all templates is not displayed)
3.2 Scope slot
1) What is a scope slot
Scope slot, simply understand it父级能用子组件数据来控制展示内容，数据源是子组件，父组件只是选择哪个展示
2) Illustrate the use
The first step: use the binding method v-bind: attribute name = data value in the slot of the component template
<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>
Step 2: Register the component component2 on the instance, the data value of return is message and message1
<script>
const app = new Vue({
el: '#app',
components: {
'component2': {
template: "#component2",
data() {
return {
message: "我是子组件的内容",
message1: "message1"
};
}
}
}
})
</script>
Step 3: Use on the component
When using components, use v-slot:name1 (named slot name) = "slotProps" in the template, and the content can be used directly:
slotProps. attribute (this attribute is slot with v-bind: attribute name = data value) to get the data of the sub-component
- { {slotProps.message}}
- { {slotProps.message1}}
<div id="app">
<component2>
<template v-slot:name1="slotProps" >
<h2>{
{slotProps.message}}</h2>
<h2>{
{slotProps.message1}}</h2>
</template>
</component2>
</div>
[External link image transfer failed, the source site may have an anti-hotlink mechanism, it is recommended to save the image and upload it directly (img-aBbaXkvs-1612841995123)(vue note 03_files/1.jpg)]
Example:
<!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>
Four, dynamic slot name
The dynamic slot name is to control the slot name through the attribute value of data. When the attribute value is modified, the replacement position of the slot will also be changed.
注意，不是cli构造的工程，使用驼峰命名会有问题，不能生效
Examples illustrate the use of
第一步：定义组件模板
<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>
In the console we put app.$data.slotname=‘name2’
[External link image transfer failed, the source site may have an anti-hotlinking mechanism, it is recommended to save the image and upload it directly (img-CWu6DbUT-1612841995125)(vue notes 03_files/2.jpg)]
Example:
<!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. Abbreviations of named slots
The abbreviation of the named slot, replaced with v-slot with #
注意没有插槽名字的时候要用：#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>