一、自定义组件中多个 slot

很久之前就想把表格封装了，奈何那时太过担心自己的技术。今天趁着劲头大致看了一下，把表格封装了，倒是比想象中的要简单很多 O(∩_∩)O 哈哈~

暂且不考虑细节，大致封装表格要考虑的有：是否需要操作按钮、是否要对表格中的某些字段值进行修改或操作。这些就要用到多个 slot，我们要做的就是区分这些 slot，在对应的 slot 下写逻辑。

只有一个 slot 时，我们只需要在组件中想要改写的位置插入 <slot></slot> 标签就可以了。当有多个时，我们要在 slot 标签中写入 name 属性对 slot 进行区分。例如：

子组件：

<div><slot name="a"><slot><h2>标题</h2><p>段落文字文字文字文字</p><slot name="b"><slot>
</div>

父组件使用：

<my-text><h1 slot="a">我是大标题</h1> <!-- 父组件中的slot值对应子组件中name的值 --><span slot="b">20121-7-16</span>
</my-text><script>import myText from "组件所在路径";export default {components: { myText }}
</script>

二、slot 传参（利用 slot 子组件给父组件传参）

1. 插槽传值：:自定义属性=值

如果要封装表格，有很多表格中都是会有一些操作，例如删除某一条数据、修改某条数据，父组件都要从子组件中拿到对应的 id 或者那一列的数据。这里我们只要在子组件的 slot 插槽中绑定一个自定义属性，再把值传给这个属性就好了，例如：

模板中使用：

子组件：

<el-table-column v-if="operateShow" label="操作" align="center" :min-width="operateWidth" fixed="right"><template slot-scope="scope"><!-- 自定义data属性，把值传给data属性。这个data是自己随便定义的一个名称 --><slot name="operate" :data="scope.row"></slot></template>
</el-table-column>

父组件：

<!-- 父组件接收参数时：slot-scope="自定义名称" -->
<template slot="operate" slot-scope="myProps"><!-- 调用数据：父组件slot-scope的自定义名称.子组件slot标签中自定义数据名称.需要且有效的字段名 --><el-button type="warning" size="mini" icon="el-icon-edit-outline" @click="update(myProps.data.url)">下载</el-button>
</template>

循环中使用：

子组件：

<!-- 与在模板中直接使用的方法相同，:data传的是表格中每一行的所有数据，:index传的是所在行的索引 -->
<template v-for="(info, infoIndex) in tableInfo"><el-table-column :key="infoIndex" :prop="info.key" :label="info.value" align="center" :min-width="info.minWidth" show-overflow-tooltip ><!-- 给插槽命名、传值、序列号 --><slot :name="info.key" :data="info" :index="infoIndex"></slot></el-table-column>
</template>

父组件：

<!-- slot="所在列的某一个字段"，并将这一列的字段值做处理 -->
<template slot="downloadDate" ><span>112</span>
</template>

2. 通过事件给父组件传值

这是自定义组件中最常用的一直方法。

子组件：通过 this.$emit() 的方式将值传递给父组件。

<template><div class="app"><input @click="sendMsg" type="button" value="给父组件传递值"></div>
</template>
<script>
export default {data () {return {//将msg传递给父组件msg: "我是子组件的msg",}},methods:{sendMsg(){//func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据this.$emit('func',this.msg)}}
}
</script>

父组件：


<template><div class="app"><child @func="getMsgFormSon"></child></div>
</template>
<script>
import child from './child.vue'
export default {data () {return {msgFormSon: "this is msg"}},components:{child,},methods:{getMsgFormSon(data){this.msgFormSon = dataconsole.log(this.msgFormSon)}}
}

vue slot的使用相关推荐

深入理解vue slot插槽
单个插槽只使用这个标签的话,可以将父组件放在子组件的内容,放到想让他显示的地方具名插槽将放在子组件里的不同html标签放在不同的位置父组件在要分发的标签里添加 slot='name' 属性子 ...
Vue slot 详解
在Vue中,我们使用组件来组织页面和组织代码,类似于搭积木,每一个组件都是一个积木,使用一些相同或者不同组件就能搭建出我们想要的页面.slot(插槽)是组件功能的重要组成部分,插槽必须用于组件才有意义 ...
Vue slot 建议用法
Vue slot 插槽文章目录 Vue slot 插槽前言一.什么时候用到插槽二.使用建议 1.老版本 (slot-scope) 2.vue2.6+ 或 vue3 (v-slot) 总结前言 ...
vue slot scope使用_20、slot插槽的用法
重点: 单个插槽.具名插槽.作用域插槽的用法: 访问插槽的方法. 其实本小白对插槽理解的还不深,哪些场景会经常用到插槽也不了解. 但是本着"大胆猜测"的理念,我的猜测如下: 假设有 ...
vue slot具名插槽
具名插槽:即具有名字的插槽,在默认插槽基础上指定插槽的名字(name = " "). 父组件指明放入子组件的哪个插槽 slot = "footer",如果是te ...
vue slot 使用
vue 插槽可用于父组件在子组件插入内容,其位置由子组件决定 1.默认插槽在btntest子组件设置slot占位符 <div><p>< ...
Vue——slot、slot-scope、scope、v-slot详解
slot vue2.6.0之前使用,现已经是被废弃的,2.6.0之后新增v-slot替代用于标记往哪个具名插槽中插入子组件内容. <body><div id="app&q ...
Vue——slot的含义是什么， slot之详细解释
slot 英文的意思是"插槽"的意思,vue用这个词做标签,意思是能够在这个标签里插入一些东西,是由调用组件(父组件)向其调用的子组件里插入一些东西的一个解决办法. slot的语法 ...
[vue] slot插槽默认插槽，具名插槽，作用域插槽
文章目录插槽不使用插槽效果分析默认插槽效果分析具名插槽效果分析作用域插槽效果分析再次理解作用域插槽代码: 默认插槽: 具名插槽作用域插槽插槽作用:让父组件可以向子组 ...

vue slot的使用

一、自定义组件中多个 slot

二、slot 传参（利用 slot 子组件给父组件传参）

1. 插槽传值：:自定义属性=值

模板中使用：

循环中使用：

2. 通过事件给父组件传值

vue slot的使用相关推荐

最新文章

热门文章

vue slot的使用

一、自定义组件中多个 slot

二、slot 传参（利用 slot 子组件给父组件传参）

1. 插槽传值：:自定义属性=值

模板中使用：​​​​​​​

循环中使用：

2. 通过事件给父组件传值

vue slot的使用相关推荐

最新文章

热门文章

模板中使用：