浅谈Vue中插槽slot的使用方法
更新时间：2021年11月24日 10:53:23 投稿：hqx
这篇文章主要给大家分享了 Vue中插槽slot的使用方法，下面文章内容围绕插槽slot的相关资料展开其的使用方法,需要的朋友可以参考一下，希望多大家有所帮助
如何定义和使用：
在组件的template中使用slot标签定义,slot标签中间可以定义默认显示值，如果slot标签没有声明name属性值，在使用插槽时将默认从第一个插槽依次往下放置，为了方便使用，一般都会都插槽slot指定一个name属性值，当要使用该插槽时，只需要在要使用的标签内添加slot=‘插槽名字',就可以将指定的标签放到指定的插槽内，插槽内可以是任意内容。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slot插槽练习</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
<div style="border: 7px solid blueviolet;">
<h2>父组件</h2>
<cpn>
<!-- 将一个元素添加到指定得插槽位置 -->
<button slot="left">按钮</button>
<input type="text" slot="right" placeholder="这是输入框..."></input>
</cpn>
</div>
</div>
<template lang="" id="cpn">
<div style="border: 6px solid green;">
<h2>子组件</h2>
<!-- 在子组件中定义三个插槽，插槽内得值为默认值 -->
<slot name="left">左</slot>
<slot name="mediate">中</slot>
<slot name="right">右</slot>
</div>
</template>
<script>
new Vue({
el:'#app',
components:{
cpn:{
template:'#cpn',
}
}
})
</script>
</body>
</html>
效果如图：
分析:
在上面实例中，子组件中定义了三个插槽，并给了具体的name属性值，在父组件调用子组件中，子组件内给name为left的插槽位置放置了一个按钮，将并将一个输入框放置到name为right的插槽。从中我们可以发现，通过使用插槽，可以使组件有更多的扩展，插槽内的内容可以是任意内容，定义插槽，相当于提前给组件挖好一个坑，等后面用到的时候再调用。
到此这篇关于 浅谈Vue中插槽slot的使用方法的文章就介绍到这了,更多相关Vue中插槽slot用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了关于vue项目proxyTable配置和部署服务器的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库,支持vue2和vue3,这篇文章主要介绍了Vue3使用vue-office插件实现word预览功能,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了ElementUI radio组件选中小改造，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
vue3出来好一段时间了,一直想着用一下,下面这篇文章主要给大家介绍了关于vue3使用element ui的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了Vue项目编译后部署在非网站根目录的解决方案,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
如果,你发现自己需要在Vue中做一次强制更新,99.99%的情况,是你在某个地方做错了事,本文给大家就介绍了Vue数据变了,但页面没有变的几种情况及解决方法,并通过代码示例介绍的非常详细,需要的朋友可以参考下2024-08-08
本文通过实例代码给大家介绍了Vue中util的工具函数，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
国际化是设计软件应用的过程中应用被使用与不同语言和地区,下面这篇文章主要给大家介绍了关于网站国际化多语言处理工具i18n安装使用方法的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-09-09
我们使⽤vue-element-admin前端框架开发后台管理系统时,⼀般都会涉及到菜单的权限控制问题,下面这篇文章主要给大家介绍了关于vue使用路由守卫实现菜单的权限设置的相关资料,需要的朋友可以参考下2023-06-06
我们在平时上网的时候会看到有些图片是加水印的,一般水印往往是后端来做的,不过有些站点要保护的知识产权类型比较多,不光是图片,可能还有视频或者文字,所以我们水印的作用,就是给他做一个适当的限制,本文就给大家介绍一下如何使用Vue实现防篡改的水印2023-08-08
最新评论