vue的插槽有几种方式,vue插槽用法
Vue槽是学习vue必不可少的一部分，越来越多的槽被发现很好用，过滤数据也是我们日常开发所必需的。本文主要介绍关于Vue槽和滤镜的相关信息，通过示例代码介绍的非常详细，有需要的朋友可以参考一下。
目录
插槽什么是插槽？内容编译范围备份内容命名槽过滤器概念语法全局过滤器本地过滤器实践总结
插槽
什么是插槽？
概念
Vue实现了一套内容分发的API，为组件提供了一个slot元素，作为承载分发内容的出口。
简单地说，slot元素被用作组件模板中的内容分发槽。插槽元素本身将被替换。
插槽内容
语法
首先创建一个新文件来写我们的槽。
//slot.vue
模板
差异
差异
！-分发内容的内容将被传送到该槽标签位置-
插槽/插槽
/div
账号：输入//p
密码：输入类型=密码//p
按钮登录/按钮
/div
/模板
脚本
导出默认值{ }；
/脚本
风格
/风格
然后我们在另一个组件中使用它(SlotTest)
//SlotTest.vue
模板
差异
slotCom
H2我是分发给slot /h2的内容
/slotCom
/div
/模板
脚本
//简介
从导入slotCom./views/slot ；
导出默认值{
组件：{
slotCom
},
}
/脚本
风格
/风格
从效果图(下图)可以看到，页面上已经渲染了h2标签的句子，标签位置也对应了slot.vue文件中的标签。
注意
如果SlotTest的模板不包含slot元素，组件的对称标签内的任何内容都将被丢弃。
编译作用域
例如，当您想要使用插槽中的数据时：
导航链接url=/profile
以{{ user.name }}身份登录
/导航链接
该插槽可以访问与模板中其他位置相同的实例属性(即相同的“范围”)，但不能访问navigation-link的范围。例如，url不可访问：
导航链接url=/profile
单击此处会将您转到：{{ url }}
/*这里的“URL”将是未定义的，因为它的内容(指该槽)是
_传递给_ navigation-link，而不是
在导航链接组件*中定义。
*/
/导航链接
通常，请记住：
父模板中的所有内容都在父范围内编译；子模板中的所有内容都在子范围内编译。
后备内容
可以在slot元素中设置备份内容。如果在当前组件的对称标签中没有插入任何内容，该组件最终将呈现备份内容。简单来说，相当于槽的默认值。举例
//一个按钮组件，将备份内容设置为文本Submit。
按钮类型=提交
插槽提交/插槽
/按钮
//当我在父组件中使用submit-button并且不提供任何槽内容时：
提交按钮/提交按钮
//将呈现备份内容“提交”:
按钮类型=提交
使服从
/按钮
//但是如果我们提供内容：
提交按钮
救援
/提交按钮
//然后将呈现此提供的内容以替换备份内容：
按钮类型=提交
救援
/按钮
具名插槽
有时我们的组件需要多个插槽。不同的组件可以插入不同的插槽。这可以通过使用命名插槽并为组件中的slot元素设置name属性来实现。当向指定的slot提供内容时，我们可以在模板元素上使用v-slot命令将相应的内容插入到指定的slot元素中。
语法
//login-component.vue
模板
差异
差异
插槽备份内容/插槽
/div
p
帐号：插槽名称=用户/插槽
/p
p
密码：slot name=psd/slot
/p
按钮登录/按钮
插槽/插槽
/div
/模板
//使用
登录组件
氘我是分发到狭槽的内容/h2
模板v型槽：用户
！-这里所有的内容都会被插入到name=用户插槽中-
差异
123
/div
/模板
输入槽= PSD type= password placeholder=这个元素会被插入到name=psd插槽中
组件a插槽= PSD /组件a
/登录-组件
注意
跟绑定事件和v型装订一样，五形槽也有缩写，即把参数之前的所有内容(五型槽：)替换为字符#。例如v型槽：接头可以被重写为#标题
登录组件
氘我是分发到狭槽的内容/h2
模板#用户
这里所有的内容都会被插入到name=用户插槽中
差异
123
/div
/模板
模板#psd
输入类型=密码占位符=这个元素会被插入到name=psd插槽中
/模板
/登录-组件
我个人觉得插槽在项目开发中不太常用，常用于一些用户界面库的开发。如果想对插槽有更深的了解可以查阅官方文档cn.vuejs.org/v2/guide/co…
过滤器
概念
vue。j允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v型装订表达式（后者从2.1.0 开始支持)。过滤器应该被添加在Java脚本语言表达式的尾部，由""符号指示：
语法
过滤器支持全局过滤器或者局部过滤器
全局过滤器
div id=应用程序
{ { str capital } }//你好
/div
//单词首字母大写
Vue.filter(大写，函数（值){
如果(!值)返回""
value=value.toString()
返回值。charAt(0).toUpperCase() value.slice(1)
})
新Vue({
埃尔： #app ，
数据：{
字符串：你好
}
})
局部过滤器
div id=应用程序
div v-for=(f，i) in friends :key=i
h3姓名：{{f.name}} /h2
p年龄：{{f.age}}/p
p性别：{{f.sexgetSex}}/p
/div
/div
脚本
新Vue({
埃尔： #app ，
数据：{
朋友：[{
姓名："最大",
性别：0,
年龄：19岁
},
{
姓名："杰克",
性别：1,
年龄：22岁
},
{
姓名：“Jacose”，
性别：1,
年龄：19岁
},
{
姓名："蒂姆",
性别：1,
年龄：18岁
},
{
姓名："吉米",
性别：0,
年龄：20岁
},
{
姓名："汤姆",
性别：0,
年龄：19岁
},
]
},
过滤器：{
getSex(类型){
if (type===0) {
返回男
}
返回女
}
}
})
/脚本
注意：过滤器支持传递多个参数，直接向字符串截取函数传递的参数会依次作为过滤器方法的第二第三.个参数
div{{hello substr(3，4)}}/div
脚本
{
过滤器：{
substr(str，start，end) {
return str.substr(start，end)
}
}
}
/脚本
练习
实现一个过滤器，能够将时间戳字符串按照指定的模板返回对应结构的时间
//例
p { 1599639292100 getTemplateTimeByDate( YYYY-MM-DD hh:MM:ss )}/p-2020-09-09 15:04:56
p { 1599639292100 getTemplateTimeByDate( YYYY-M-d h:M:s )}/p-2020-9-9 15:4:6
p { 1599639292100 getTemplateTimeByDate( YYYY年M月d日hh:mm)}/p - 2020年9年9 15:04
新Vue({
埃尔： #app ，
数据：{
日期：新日期()。getTime()
},
过滤器：{
getTemplateTimeByDate(日期，模板){
日期=新日期（日期)
让TimeObj={
Y : date.getFullYear()，
(M ): date.getMonth() 1，
:date.getDate()，
(h ): date.getHours()，
(m ): date.getMinutes()，
:date.getSeconds()
}
for(键入时间对象){
let reg=new RegExp(key)
if(注册测试(模板)){
console.log(RegExp。$1)
let time=TimeObj[key]
//判断当前模板时间是两位数还是一位数。
//如果是需要以零开头的两位数时间，则为1-01
//如果是不加零的一位运算
if (RegExp。$1 .长度1) {
时间=时间=10？时间：“0”时间
}
template=template.replace(注册，时间)
}
}
返回模板
}
}
})
/脚本
总结
这就是这篇关于Vue中插槽和过滤器的文章。有关Vue插槽和过滤器的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。