vue slot的使用

原创已于 2022-06-21 10:00:53 修改 · 1.9k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #elementui #javascript

于 2021-07-19 09:17:59 首次发布

vue项目问题专栏收录该内容

16 篇文章

订阅专栏

一、自定义组件中多个 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 = data
                console.log(this.msgFormSon)
            }
    }
}