Vue学习:19.插槽实例
来个简单示例练练手吧。
实例:插槽实例
思路
在封装表格组件时,通常使用默认插槽和作用域插槽来处理固定的自定义结构。
代码
根组件(APP.vue)
<template>
<div>
<MyTable :data="list1">
<!-- 使用插槽 -->
<!-- 3.通过template #插槽名=‘变量名’接收数据 -->
<template #default="obj">
<button @click="del(obj.row.id)">删除</button>
</template>
</MyTable>
<MyTable :data="list2">
<!-- v-slot: 等价于 # -->
<template v-slot:default="{ row }">
<button @click="show(row)">查看</button>
</template>
</MyTable>
</div>
</template>
<script>
import MyTable from './components/MyTable.vue'
export default {
data(){
return{
list1:[
{id:1, name:'赵天明', age:25},
{id:2, name:'李翔飞', age:22},
{id:3, name:'吴国基', age:24},
],
list2:[
{id:1, name:'赵天明', age:25},
{id:2, name:'李翔飞', age:22},
{id:3, name:'吴国基', age:24},
]
}
},
methods:{
del(id){
// console.log(id)
this.list1 = this.list1.filter(item => item.id !== id)
},
show(row){
// console.log(row)
// 使用模版字符${}需要反引号-``(波浪线那个)
alert(`姓名: ${row.name}; 年龄: ${row.age}`)
}
},
components:{
MyTable
}
}
</script>
<style>
</style>
子组件
<template>
<div>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in data" :key="item.id">
<td>{{ index+1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>
<!-- 定义插槽 -->
<!-- 1.以添加属性的方式,传值 -->
<slot :row="item" msg="测试文本"></slot>
<!-- 2.将所有属性添加到一个对象 -->
<!-- {
row:{id:2, name:'李翔飞', age:24},
msg:'测试文本'
} -->
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
props:{
data:Array
}
}
</script>
<style scoped>
table{
margin-top: 20px;
border-collapse: collapse;
text-align: center;
}
th,td{
width: 80px;
height: 50px;
line-height: 50px;
border: 2px solid rgb(163, 161, 161);
}
th{
background-color: blue;
color: #fff;
}
</style>
效果图
Vue学习:19.插槽实例的更多相关文章
- Vue学习1:实例及生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue学习之插槽
插槽 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. 个人理解:我感觉插槽就是父组件控制插槽 ...
- Vue学习笔记-插槽基本使用
为了让我们的组件更加具有扩展性,可以使用插槽 <div id="app"> <cpn> <span>返回</span> <in ...
- Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)
插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...
- Vue学习之路之登录注册实例代码
Vue学习之路之登录注册实例代码:https://www.jb51.net/article/118003.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/wa ...
- Vue学习看这篇就够
Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...
- Vue 学习文档
Vue 学习文档 vue 起步 引包 启动 new Vue(options) options: el 目的地(可以用类名.标签名等,也可以直接用mod元素) #elementId .elementCl ...
- day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等
Vue学习四之过滤器.钩子函数.路由.全家桶等 本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...
- day 82 Vue学习三之vue组件
Vue学习三之vue组件 本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
- vue学习06 v-show指令
目录 vue学习06 v-show指令 v-show指令是:根据真假切换元素的显示状态 原理是修改元素的display,实现显示隐藏 指令后面的内容,最终都会解析为布尔值(true和false) 练习 ...
随机推荐
- RocketMQ 消息集成:多类型业务消息——定时消息
简介: 本篇将继续业务消息集成的场景,从使用场景.应用案例.功能原理以及最佳实践等角度介绍 RocketMQ 的定时消息功能. 作者:凯易.明锻 引言 Apache RocketMQ 诞生至今 ...
- 一首歌的时间,手把手搭建基于FC的网站
简介: 不是杰伦的那一首歌啦~ 部署网站 说好不哭 在接触serverless架构之前,我们如果想实现上线一个Web网站,就要在开发前期经过操作很多冗杂但又必须的步骤,不少小白可谓是快速的从入门到退坑 ...
- OpenYurt 开箱测评 | 一键让原生 K8s 集群具备边缘计算能力
作者| 郑超 阿里云高级开发工程师 随着物联网技术以及 5G 技术的高速发展,将云计算的能力延伸至边缘设备端,并通过中心进行统一交付.管控,已成为云计算的重要发展趋势.为服务更多开发者把握这一趋势,5 ...
- 万物有灵,萌物Luka机器人如何让故事点缀童年
简介:未来的十年将会是AI影响教育的十年.物灵科技正是基于在AI+教育未来趋势前瞻性的把握,不断将人格化属性和关系式交互体验赋予更多人工智能产品,启发儿童语言培养阶段的学习兴趣.依托阿里云技术,物灵 ...
- [FAQ] uni-app 运行微信小程序 main.wxss 报错 unexpected token "$"
检查一下你是否在 App.vue 中有手动操作引入过 uni.scss,比如下面的 import: <style lang="scss"> @import url(&q ...
- WPF 框架开发 ColumnDefinition 和 RowDefinition 的代码在哪
我的 VisualStudio 在更新到 2022 就构建不通过 WPF 仓库,提示我在 Grid 的代码里面找不到 ColumnDefinitionCollection 和 RowDefinitio ...
- 您可知道如何通过`HTTP2`实现TCP的内网穿透???
可能有人很疑惑应用层 转发传输层?,为什么会有这样的需求啊???哈哈技术无所不用其极,由于一些场景下,对于一个服务器存在某一个内部网站中,但是对于这个服务器它没有访问外网的权限,虽然也可以申请端口访问 ...
- LVS负载均衡(3)-- DR模型搭建实例
目录 1. LVS DR模型搭建 1.1 DR模型网络规划 1.2 RS设备的VIP冲突解决方式 1.3 DR模型访问流程 1.4 DR模型配置 1.4.1 ROUTER设备配置 1.4.2 后端ng ...
- ubuntu配置nginx+php开发环境(virtualbox)
A.安装环境 1.安装php7.0 sudo apt install php7.0 2.安装php7.0-fpm,这是php和nginx之间的连接器. sudo apt install php7.0- ...
- Vben-admin---ApiSelect Invalid prop: type check failed for prop "onUpdate:value". Expected Function, got Array
在basicFrom组件里添加一个ApiSelect, <template #localSearch="{ model, field }"> <ApiSelect ...