VUE3 之 插槽的使用 - 这个系列的教程通俗易懂，适合新手
1. 概述
非理性定律告诉我们：
人们总是习惯于以情感去判断眼前的事物，非理性的去做决定。
对于长远的利益，人们更愿意去选择短期的利益。
因此在做决定前要让自己冷静，理性的分析，让自己看的更远。
言归正传，今天我们来聊一个新的概念 —— 插槽。
2. 插槽的使用
2.1 一个简单的例子
我们先来看一个简单的例子
<body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ template:` <div> <my-form /> </div> ` }); app.component("my-form", { methods:{ myClick() { alert('提交'); } }, template: ` <div> <input /> <button @click="myClick">提交</button> </div> ` }); const vm = app.mount("#myDiv");
这个例子很简单，我们在子组件中写了一个文本框，文本框的后面是一个按钮，点击按钮会 alert 一个提示
2.2 父组件决定按钮的样式
如果我们希望子组件更灵活、复用性更强，子组件按钮的样式可以由父组件去改变，该怎样做呢，我们看下面的例子
const app = Vue.createApp({ template:` <div> <my-form> <div>提交</div> </my-form> <my-form> <button>提交</button> </my-form> </div> ` }); app.component("my-form", { methods:{ myClick() { alert('提交'); } }, template: ` <div> <input /> <slot @click="myClick"></slot> </div> ` });
这里我们使用了插槽（slot）的概念，父组件使用子组件时，组件标签中间的部分就是插槽的内容，
例如：<my-form><div>提交</div></my-form> 中，<div>提交</div> 就是插槽的内容
子组件定义时，可以使用 <slot /> 获取到父组件定义的插槽的内容
这个例子中，父组件使用了两次 my-form 子组件，但按钮的样式是不同的。
但这个例子中有一个问题，我们会发现点击【提交】按钮没有任何效果，这是因为 slot 标签是不能直接绑定事件的，下面我们来解决这个问题
2.3 插槽绑定事件
slot 标签不能直接绑定事件，通常的做法是在外层加一个 span 标签，然后把事件绑定到 span 标签上
const app = Vue.createApp({ template:` <div> <my-form> <div>提交</div> </my-form> <my-form> <button>提交</button> </my-form> </div> ` }); app.component("my-form", { methods:{ myClick() { alert('提交'); } }, template: ` <div> <input /> <span @click="myClick"> <slot></slot> </span> </div> ` });
2.4 子组件作为插槽的内容
插槽的内容，可以是普通标签、普通字符串，也可以是其他的子组件
const app = Vue.createApp({ template:` <div> <my-form> <my-button /> </my-form> </div> ` }); app.component("my-button", { template: ` <div>my-button组件按钮</div> ` }); app.component("my-form", { methods:{ myClick() { alert('提交'); } }, template: ` <div> <input /> <span @click="myClick"> <slot></slot> </span> </div> ` });
这个例子中，我们在 my-button 组件中定义了一个 div按钮，然后在父组件中把 <my-button /> 作为插槽的内容，VUE 是支持的
2.5 插槽中使用数据
插槽中也是可以使用数据的
const app = Vue.createApp({ data() { return { buttonName : '提交' } }, template:` <div> <my-form> <div>{{buttonName}}</div> </my-form> <my-form> <button>{{buttonName}}</button> </my-form> </div> ` }); app.component("my-form", { methods:{ myClick() { alert('提交'); } }, template: ` <div> <input /> <span @click="myClick"> <slot></slot> </span> </div> ` });
这个例子中，插槽内容中的按钮的名称，取自父组件的数据 buttonName
2.6 插槽的默认值
如果父组件想省事，不想指定子组件的按钮样式，此时，就需要我们指定插槽的默认内容
const app = Vue.createApp({ data() { return { buttonName : '提交' } }, template:` <div> <my-form /> </div> ` }); app.component("my-form", { methods:{ myClick() { alert('提交'); } }, template: ` <div> <input /> <span @click="myClick"> <slot>默认提交按钮</slot> </span> </div> ` });
指定插槽的默认内容很简单，在子组件的 slot 标签中间， 写上默认内容即可，当父组件不指定插槽内容时，则使用该内容作为插槽内容
2.7 具名插槽
如果子组件分为 header、main、footer 3个部分，header 和 footer 由父组件决定，header 放在 main 的上方， footer 放在 main 组件的下方，该如何做呢，看下面的例子
const app = Vue.createApp({ data() { return { buttonName : '提交' } }, template:` <div> <my-html> <template v-slot:header> <div>header</div> </template> <template v-slot:footer> <div>footer</div> </template> </my-html> </div> ` }); app.component("my-html", { methods:{ myClick() { alert('提交'); } }, template: ` <div> <slot name="header" /> <div>main</div> <slot name="footer" /> </div> ` });
首先，父组件使用子组件时，使用 template 标签包住 header 的内容，在 template 标签中使用 v-slot:header 为该部分插槽命名。
子组件中，使用 <slot name="header" /> 指定插槽的位置。
footer 部分类似
3. 综述
今天聊了一下 VUE3 的 插槽的使用，希望可以对大家的工作有所帮助，下一节我们继续讲组件的相关知识，敬请期待
欢迎帮忙点赞、评论、转发、加关注 ：）
关注追风人聊Java，每天更新Java干货。
4. 个人公众号
追风人聊Java，欢迎大家关注
