189 8069 5689
本篇内容介绍了“Vue插槽Slot的作用是什么及怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
创新互联建站专注为客户提供全方位的互联网综合服务，包含不限于成都网站制作、网站设计、阜新网络推广、小程序设计、阜新网络营销、阜新企业策划、阜新品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联建站为所有大学生创业者提供阜新建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com
初识插槽:
为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素；【相关推荐：vuejs视频教程】
比如某种情况下我们使用组件，希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片；
我们应该让使用者可以决定某一块区域到底存放什么内容和元素；
所以就可以使用插槽来解决这个问题
换句话说就是，我们要是想在一个组件标签中添加新的内容，那么我们就需要在该组件内声明一个插槽，不然，添加的新内容不会被渲染
使用插槽：
用slot元素作为插槽
插入什么内容是由父元素如何使用，比如父组件插入按钮、插入图片，就会显示按钮图片，如果没有，那就不显示或许显示插槽默认的内容
有时候我们希望在使用插槽时，如果没有插入对应的内容，那么我们需要显示一个默认的内容：
当然这个默认的内容只会在没有提供插入的内容时，才会显示；
我们可以在slot标签中设置一个默认内容
使用插槽案例：
父组件
App.vue
子组件showMessage.vue
我是默认值
{{title}}
效果图：
我们可以发现，在组件showMessage里面，我们给它一个插槽，
在App.vue, 我们给showMessage三次复用，
一次为按钮，一次为a标签，一次什么也不加
而产生的结果就是，一个为按钮，一个为a链接，一个为插槽默认的p标签
我们可以看出来
插槽部分想要展示什么内容由父元素进行决定, 如果插槽没有 插入东西, 那么这个插槽会被忽略
也就是说，用了插槽，父元素如果用按钮，子元素就会显示按钮，父元素用标题，子元素就会显示标题
如果子组件没有插槽，那就显示不出来了
希望达到的效果是插槽对应内容的显示，这个时候我们就可以使用具名插槽：
具名插槽顾名思义就是给插槽起一个名字，slot 元素有一个特殊的 attribute：name；
一个不带 name 的slot，会带有隐含的名字 default；
也就是说, 我们可以给每个插槽都取上一个名字,
在父组件中使用的时候, 需要包裹一个template标签, 并在template中使用
v-solt: 插槽名 具名插槽缩写#
父组件App.vue
子组件NavBar.vue
(颜色啥的css里面自己可以调，这里就不放了）
效果图：
达到的效果是插槽对应的显示
所以这就是具名插槽的作用
动态插槽名
通过 v-slot:[dynamicSlotName]方式动态绑定一个名称。
“Vue插槽Slot的作用是什么及怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！