Vue知识点总结(15)——匿名插槽(超级详细)
我们在前几期已经说过了组件的各种知识。
接下来我们就要学习插槽的内容了,插槽是Vue组件化开发的拓展内容。
官方文档种解释插槽的作用就是:在vue中实现的一套分发内容的API,将slot元素作为承载内容分发出口。
用大白话说就是:想要在一个组件标签中添加新的内容,必须在该组件内声明一个slot元素,否则,添加的新内容则不会被渲染。
通常我们会在vue中将各种通用的功能单独拿出来进行封装,以便于后面复用,但是有时候需要复用的组件不是完美契合,这个时候就需要用到插槽,slot可以让用户拓展组件,更好的实现组件的复用。
接下来我们用一个简单的例子实现一下匿名插槽。
我们现在设想一个业务场景,我们现在在做登录注册页面,登录注册的页面会有很多的按钮,当我们开发组件的时候,如果还像之前一样开发组件,我们会遇到哪些问题?
如果现在要做两个按钮,一个登录一个注册,组件化开发,它们的基本的内容架构是很类似的,我们要开发两个组件吗?
显然太笨重,违背组件化开发的初衷。
这个时候就要用到插槽了。
<div id="app">
<App></App>
</div>
<script>
Vue.component('MBtn',{
template:`
<button>
<slot></slot>
</button>
`
})
const App = {
data () {
return {
title:'老爹'
}
},
template:`
<div>
<MBtn><a href="#">登录</a></MBtn>
<MBtn>注册</MBtn>
</div>
`,
}
new Vue({
el:'#app',
data:{
},
components: {
App
}
});
</script>
我们写了一个全局组件MBtn,也就是按钮。
在模板中,我们要尤其注意一点,在简单的button标签中,我写了一个slot标签,这个就是匿名插槽。
然后我们在局部组件App中,使用一下这个MBtn全局按钮组件。
插槽的好处是什么?
我们可以在使用的时候在这个组件的内部写需要的东西。
也就是我们之前提到的注册和登录,如果不用插槽的话,是没有办法直接在不使用JS的层面解决这个问题的。
具体看一下App这个局部组件的template模板中的内容,我们使用了两次这个MBtn组件,在里面可以任意嵌套想写的东西。
这样我们只需要使用一个组件就可以分别开发注册和登录按钮。
是不是很方便。
在一个页面中可能有很多很多的按钮,如果我们不用插槽的话,我们是没法在其中任意嵌套我们想用的内容的,就显得很死板。
其实插槽就可以简单理解为,我在那里留了一个位置,我还没有想好要放什么东西,但是我要先占着,等我想放东西,随时放。
插槽是分很多种的,我们这期先暂时了解一下匿名插槽的内容,后续的内容持续更新。
有微信小程序课设、毕设需求联系个人QQ:505417246
关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号,请大家多多关注,谢谢!
相关文章
- Vue笔记:vue-router
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue -> 解决 vue-ueditor-wrap 不能显示的问题
- vue笔记
- Vue Element使用icon图标(第三方)
- [Vue @Component] Pass Props to Vue Functional Templates
- [Vue @Component] Simplify Vue Components with vue-class-component
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- npm install时报平台不兼容Unsupported platform for xxx的解决办法:npm install -f强制安装(centos7下安装vite2 vue依赖时出现这个问题)
- vue全局组件与局部组件
- vue事件修饰符:通过@click.prevent 阻止事件的默认行为
- vue定义一个变量并显示
- Vue钩子函数
- 前端面试题:谈一谈vue和react的区别?
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- vue项目报错导致项目无法启动
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
- Vue前端路由
- Vue中vue-i18n结合element-ui实现国际化
- 232:vue+openlayers选择左右两部分的地图,不重复,横向卷帘
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- Vue: vue-router路由
- 2023前端面试重点知识点总结【详细】css+js+vue+react+小程序+性能优化等等