vue模拟el

您所在的位置：网站首页 › label的作用和用法 › vue模拟el

vue模拟el

2023-06-10 18:16| 来源: 网络整理| 查看: 265

vue模拟el-table演示插槽用法

转载自：www.javaman.cn

很多人知道插槽分为三种，但是实际到elementui当中为什么这么用，就一脸懵逼，接下来就跟大家聊一聊插槽在elementui中的应用，并且自己写一个类似el-table的组件

vue的slot分为三种：:匿名插槽，具名插槽，作用域插槽，主要作用：让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于父组件=>子组件

1、匿名插槽

匿名组件相当于一个占位符，将父组件的数据传入子组件的slot标签内

父组件：

父组件调用 import ChildSlot from "@/components/ChildSlot"; export default { components:{ ChildSlot } }

子组件：

我是子组件 export default { name: "ChildSlot" }

运行结果如下：

此时父组件中的“父组件调用”这段内容就传递到了子组件，并填入了slot挖的坑当中

在这里插入图片描述

2、具名插槽

具名插槽相当于给插槽添加了一个名字（给插槽加入name属性就是具名插槽）

父组件：

我是父组件传递的用户姓名我是父组件传递的年龄 import ChildSlot from "@/components/ChildSlot"; export default { components:{ ChildSlot } }

子组件:

我是子组件 export default { name: "ChildSlot" }

运行结果如下：

此时父组件中的根据slot的name，将内容填入了slot挖的坑当中，一个萝卜一个坑

在这里插入图片描述

3、作用域插槽

与前两者的不同 slot自定义:name=“值” 子组件可向父组件传递信息

父组件：

我是子组件传递的用户姓名：{{username}} import ChildSlot from "@/components/ChildSlot"; export default { components:{ ChildSlot } }

子组件:

我是子组件 export default { name: "ChildSlot", data(){ return{ username:'java', } } }

运行结果如下：

通过作用域插槽，我们可以将子组件中的值传入到父组件，在父组件进行数据处理后，填坑到子组件

在这里插入图片描述

4、模拟写一个el-table

先看一个el-table的例子，当需要对一行中的某一个单元格的内容进行处理的时候，需要用到slot插槽，例如下面的姓名name的处理

姓名: {{ scope.row.name }} 住址: {{ scope.row.address }} {{ scope.row.name }}

参照el-table，实现我们自己的table组件，讲解下为什么需要用插槽，用了哪些插槽

4.1为了传递table，首先通过匿名插槽，写一个的组件，目的就是模拟下面这三行内容

export default { name: "MyTable" } 4.2实现el-table-column，通过作用域插槽，写我们自己的el-table-column {{ label }} {{user[prop]}} export default { name: "MyTableColumn", props: { prop: {type: String}, label: {type: String} } } 4.2调用my-table，my-table-column

我们通过my-table标签，将内容my-table和my-table-column放置到my-table的匿名插槽中，并通过子组件的props属性，接收prop和label。如同elementui一样，如果prop为空，子附件将父组件的user通过作用域插槽传递到父组件，并在父组件进行处理

{{scope.row.address}} import MyTable from "@/components/MyTable"; import MyTableColumn from "@/components/MyTableColumn"; export default { name: 'App', components:{ MyTableColumn, MyTable }, data(){ return{ tableList:[ { name: 'java大师1', sex: '男', address: '西藏1' }, { name: 'java大师2', sex: '男', address: '西藏2' }, { name: 'java大师3', sex: '男', address: '西藏3' }, { name: 'java大师4', sex: '男', address: '西藏4' } ] } } }

展示结果如下：

在这里插入图片描述

【本文地址】

vue模拟el

vue模拟el

今日新闻

推荐新闻