vue插槽样式_vue 插槽简介及使用示例
Vue的插槽，是一种内容分发机制，但是我感觉它更加像组件的一种占位符的概念，通过插槽，等待组件外部传入复杂的内容。
使用插槽的好处
在以前的例子中todo-item插槽直接写在了todo-list插槽中，其实是比较不合理的，它会导致todo-list插槽比较死板，无法重用更多的其他组件。
Vue.component("todo-list", {
template: `
`,
data: function() {
return {
};
},
methods:{
}
});
通过插槽化改造，则可以允许使用todo-list组件的用户自行的传入想要使用的todo-item，而不是一个固定的内容。
插槽改造过程
改造示例：
将todo-item组件从todo-list组件中移除，放到页面的html代码中。
将todo-list组件中原todo-item的位置修改为
因为todo-item移到了页面html代码中，所以需要将todo-list的data中的list，移回全局vue中，防止组件找不到list导致v-for报错；handleDelete同理也要移至全局vue中
Document
Vue.component("todo-list", {
template: `
`,
data: function() {
return {
};
},
methods:{
}
});
Vue.component("todo-item", {
props: {
title: String,
del: {
type: Boolean,
default: false
}
},
template: `
{{title}}
{{title}}
删除
`,
data: function() {
return {};
},
methods: {
handleClick(){
console.log("点击删除按钮！");
this.$emit('delete',this.title);
}
}
});
var vm = new Vue({
el: "#app",
data: {
list: [
{
title: "新课程1",
del: false
},
{
title: "新课程2",
del: true
},
{
title: "新课程3",
del: false
}
]
},
methods: {
handleDelete(vtitle){
console.log("删除工程！",vtitle)
}
}
});
效果和改造前是一模一样的。
插槽的种类
处理默认插槽外，还有具名插槽，作用域插槽等等。
所谓的具名插槽就是指带有名称的插槽，解决的是一个组件中存在多个插槽的业务场景。比如有一个母版页组件，希望区分页头，页尾和页面主体。实现如下效果：
那么这个组件应该这样编写
具体调用组件的位置，则有两种写法：
一种是2.6之前的写法。
头部段落
主段落
尾部段落
组件名>
一种是2.6之后的写法
头部段落
主段落
尾部段落
组件名>
按照2.6之后的写法，我们尝试将todo-item组件中增加一个前置lable和后置lable
在todo-item组件的template中的html中增加slot插槽，并标记名称
html页面的组件调用位置，使用template和v-slot的语法插入内容
Document
前置文字
后置文字
Vue.component("todo-list", {
template: `
`,
data: function() {
return {
};
},
methods:{
}
});
Vue.component("todo-item", {
props: {
title: String,
del: {
type: Boolean,
default: false
}
},
template: `
{{title}}
{{title}}
删除
`,
data: function() {
return {};
},
methods: {
handleClick(){
console.log("点击删除按钮！");
this.$emit('delete',this.title);
}
}
});
var vm = new Vue({
el: "#app",
data: {
list: [
{
title: "新课程1",
del: false
},
{
title: "新课程2",
del: true
},
{
title: "新课程3",
del: false
}
]
},
methods: {
handleDelete(vtitle){
console.log("删除工程！",vtitle)
}
}
});
作用域插槽：作用域插槽可以接收子组件传递的值，并根据不同的值显示不同的内容。如根据用户根据返回的值控制样式信息。
作用域插槽示例：
为todo-item的data属性增加返回值vRandom
data: function() {
return {
vrandom:Math.random()
};
},
在todo-item的template的html中通过v-bind绑定组件中的属性。
template: `
{{title}}
{{title}}
删除
`,
在使用组件时通过模板语法调用绑定的变量
前置文字{{val}}
后置文字
全部html代码为
Document
前置文字{{val}}
后置文字
Vue.component("todo-list", {
template: `
`,
data: function() {
return {
};
},
methods:{
}
});
Vue.component("todo-item", {
props: {
title: String,
del: {
type: Boolean,
default: false
}
},
template: `
{{title}}
{{title}}
删除
`,
data: function() {
return {
vrandom:Math.random()
};
},
methods: {
handleClick(){
console.log("点击删除按钮！");
this.$emit('delete',this.title);
}
}
});
var vm = new Vue({
el: "#app",
data: {
list: [
{
title: "新课程1",
del: false
},
{
title: "新课程2",
del: true
},
{
title: "新课程3",
del: false
}
]
},
methods: {
handleDelete(vtitle){
console.log("删除工程！",vtitle)
}
}
});
组件的插槽还有一种带默认值的用法：在slot中增加默认内容
template: `
{{title}}
{{title}}
删除
默认尾部
`,
如果调用组件时没有在插槽位置插入内容，则html展示以默认内容进行填充，如果有插内容则以插入值填充。
前置文字{{val}}
后置文字
效果
前置文字{{val}}
或者
前置文字{{val}}
以上就是vue 插槽简介及使用示例的详细内容，更多关于vue 插槽的资料请关注脚本之家其它相关文章！
vue插槽样式_vue 插槽简介及使用示例相关推荐
- vue插槽样式_Vue 插槽(slot)使用(通俗易懂)
因为在2.6.0中,具名插槽 和 作用域插槽 引入了一个新的统一的语法 (即v-slot 指令).它取代了 slot 和 slot-scope,并且现在网上都说的是一些老版本的内容,官方文档不太容易理 ...
- vue插槽样式_Vue 插槽详解
Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白. 后面越来越发现插槽的好用. 分享一下插槽的一些知识吧. 分一下几点: 1.插槽内可 ...
- vue + element-ui 聊天_Vue 插槽详解
阅读本文约需要5分钟 大家好,我是你们的导师,我每天都会在这里给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈).上次老师跟大家分享了下前端几种高级布局的方式的相关知识,今天跟大家分享Vue ...
- vue插槽样式_Vue为什么要有插槽
一般来说父组件只能复用子组件但是没办法改变子组件的内容和样式 总之就是 你可以用我但是不可以改变我 就像买车一样 不能自己去决定车的配置.外观.性能.尺寸,这些都是厂家自己设计好然后批量生产的 大家买 ...
- VUE之组件（插槽slot与可复用组件）
插槽slot 首先创建个基础组件,然后在页面调用显示,如下所示 <div id="app"><blog></blog></div>& ...
- vue不具名插槽与具名插槽
vue不具名插槽与具名插槽 需求:面向未来编程,实现在未来中若出现修改内容可以简便的修改,而不需要将全部整改 思路:在组件Tabbar.vue(底部导航)当中使用不具名插槽,Tab-bar-item. ...
- Vue中slot的使用(具名插槽与作用域插槽)
文章目录 前言 一.什么是插槽 二.前期准备 三.具名插槽的使用 1.子组件配置slot 2.使用者App.vue配置数据 3.结果展示 4.具名插槽总结 四.作用域插槽的使用 1.子组件配置slot ...
- vue 中的solt插槽
插槽的种类: 插槽分为3种,一种是默认插槽.一种是具名插槽.一种是作用域插槽. 插槽的定义: 在子组件中用 <solt></solt> 划出一块区域用来显示父组件中的页面结构, ...
- Vue —— 进阶插槽（slot）（默认插槽、具名插槽和作用域插槽）
Vue全家桶 系列文章目录 内容 参考链接 Vue2.x - 基础 Vue2.x - 基础 Vue2.x - 进阶(零) 初始化脚手架 Vue2.x - 进阶(一) refs属性.props配置项 V ...
最新文章
- windows 2003 配置dhcp服务器
- CString之GetBuffer、ReleaseBuffer
- ugui源码_UGUI整体解决方案基础篇（Unity 2019）
- rms | 如何绘制模型带置信区间的预测曲线
- 今天生意为什么越来越难做，到底真相是什么？
- day15【前台】项目发布
- java并发编程（四） 线程池 任务执行、终止源码分析
- gps模拟器 matlab,基于Matlab/Simulink的数字中频GPS信号软件模拟器
- matlab自动打卡程序,MATLAB人脸考勤打卡签到系统[摄像头界面GUI]
- java workbook.close_找不到符号Workbook.close（）
- 极米、当贝、坚果3000内的投影仪有什么推荐？
- java操作word文档（文字，图片，表格添加以及替换操作）
- mysql处理emoji表情_Mysql处理emoji表情
- 震惊，用过微粒贷的人没资格贷款买房！
- 京东2021年618项目规划——附下载
- 【Ajax】form表单
- 网站流量统计与网站访问分析
- linux cgi 更改网络配置,惨绝人寰的蓝点linux2.0配置perl cgi-CGI教程,CGI文档
- HDU2550 百步穿杨【打印图案】
- 微信公众号接入AI聊天机器人