什么是插槽
插槽就是子组件中的提供给父组件应用的一个占位符，用<slot></slot> 示意，父组件能够在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。
根本应用
编写一个父组件
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
template: ` <h2>父组件</h2>`
})
const vm = app.mount("#app")
</script>
</html>再写一个子组件
app.component('son', {
template: `
<div>
<h3>子组件</h3>
</div>
`
})父组件调用子组件
const app = Vue.createApp({
template: ` <h2>父组件</h2><son />`
})插槽如何应用呢？只须要在子组件中退出<slot></slot>，而后在父组件中应用。
app.component('son', {
template: `
<div>
<h3>子组件</h3>
<slot></slot>
</div>
`
})const app = Vue.createApp({
template: ` <h2>父组件</h2><son>这是父组件要在子组件中显示的内容</son>`
})运行成果：
父组件
子组件
这是父组件要在子组件中显示的内容插槽反对任何DOM元素，比方咱们增加style款式
const app = Vue.createApp({
template: ` <h2>父组件</h2><son><div style="color:red;font-size:25px">这是父组件要在子组件中显示的内容</div></son>`
})默认插槽
咱们如果须要子组件在任何状况下，都能渲染文本。咱们能够将默认文本放在<slot>标签内:
app.component('son', {
template: `
<div>
<h3>子组件</h3>
<slot>子组件的默认内容</slot>
</div>
`
})当初应用父组件去调用：
const app = Vue.createApp({
template: ` <h2>父组件</h2><son/>`
})运行成果：
父组件
子组件
子组件的默认内容具名插槽
有的时候，咱们一个子组件须要多个插槽，例如：
app.component('son', {
template: `
<div>
<h3>公民根本信息</h3>
<slot>
<!--姓名-->
</slot>
<slot>
<!--年龄-->
</slot>
<slot>
<!--性别-->
</slot>
</div>
`
})像这种状况，<slot> 有一个非凡的属性name
app.component('son', {
template: `
<div>
<h3>公民根本信息</h3>
<slo name="name">
姓名
</slot>
<slot name="age">
年龄
</slot>
<slot name="sex">
性别
</slot>
</div>
`
})如何应用呢？很简略只须要在DOM元素上，应用v-slot注明应用的插槽名称：
const app = Vue.createApp({
template: `
<h2>父组件</h2>
<son>
<template v-slot:name>小明</template>
<template v-slot:age>7</template>
<template v-slot:sex>男</template>
<son/>
`
})运行成果：
父组件
公民根本信息
小明7男v-slot:name这种语法能够简写成#name，代码如下：
const app = Vue.createApp({
template: `
<h2>父组件</h2>
<son>
<template #name>小明</template>
<template #age>7</template>
<template #sex>男</template>
<son/>
`
})注：只有呈现多个插槽，所有的插槽应用残缺的基于 <template> 的语法。
插槽的作用域
有时让插槽内容可能拜访子组件中才有的数据是很有用的。
写一个子组件:
const app = Vue.createApp({
data(){
return {
list:['A','B','C']
}
},
template: `<div v-for="item in list">{{item}}</div>`
})父组件想应用子组件插槽中的值，能够应用:绑定的模式进行传递，比方写成:item="item"，具体的代码能够写成上面的样子。
const app = Vue.createApp({
data(){
return {
list:['A','B','C']
}
},
template: `
<div>
<slot v-for="item in list" :item="item" />
</div>`
})写完后父组件中用v-slot="xxx"的模式承受，接管后就能够应用了
const app = Vue.createApp({
template: `
<list v-slot="props">
<span>{{props.item}}</span>
</list>
`留神这里的props是子组件传递过去的数据都是对象，但你也能够应用任意你喜爱的名字。
发表回复