共计 2398 个字符，预计需要花费 6 分钟才能阅读完成。
什么是插槽
插槽就是子组件中的提供给父组件应用的一个占位符，用 <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 是子组件传递过去的数据都是对象，但你也能够应用任意你喜爱的名字。
正文完