vue slot与传参实例代码讲解

本文将为大家详细讲解Vue中slot与传参的使用方法及实例代码讲解。

什么是Vue中的Slot

在Vue中，我们可以使用组件来构建我们的应用程序。组件允许我们将结构、样式和行为封装在一个可重用的组合单元中。

在某些情况下，我们需要一个组件在父组件中形成一个布局，在不了解内容的情况下。这时，Vue中的插槽（slot）就能派上用场。插槽提供了组件的一种占位符，允许我们将父组件中的内容插入子组件的特定位置。简而言之，插槽类似于HTML中的占位符，占据位置但没有内容，等待填充。

Vue中插槽的使用方法

定义插槽

在需要使用插槽的组件模板中添加<slot>标签。

示例代码：

<template>
   <div>
      <h3>我是父组件</h3>
      <slot></slot>
   </div>
</template>

使用插槽

在父组件使用子组件时，将要填充插槽的内容放在子组件标签内即可。

示例代码：

<template>
    <div>
        <hello-world>
            <p>我是插槽内容</p>
        </hello-world>
    </div>
</template>

给插槽传递数据

在父组件中除了直接使用<slot></slot>插入内容外，还可以在插槽内部传递数据。

在父组件中添加子组件，并通过属性或者变量来进行传递。

示例代码：

<template>
    <div>
        <hello-world>
            <p>我是插槽内容</p>
            <p>{{message}}</p>
        </hello-world>
    </div>
</template>

<script>
    import HelloWorld from './HelloWorld.vue'

    export default {
        components: {
            HelloWorld
        },
        data() {
            return {
                message: '我是从父组件传递过来的数据'
            }
        }
    }
</script>

在子组件中通过$slots访问插槽内容，并将数据传递到插槽内部。

示例代码：

<template>
   <div>
      <h3>我是子组件</h3>
      <slot></slot>
   </div>
</template>
<script>
    export default {
        mounted() {
            console.log(this.$slots)
        }
    }
</script>

Vue中插槽的高级用法

在一些高级场景下，我们可能需要为插槽添加一些特殊的属性或者结构。下面我们来学习如何使用具有特殊属性的插槽。

具名插槽

有时候，父组件中可能包含多个插槽，如果子组件与父组件同时存在多个插槽，我们需要给插槽取一个名字。

在父组件中定义插槽时，定义插槽的名字，同时在子组件中，使用name属性把该插槽与组件的插槽绑定。

示例代码：

<!-- 父组件 -->
<template>
    <div>
        <h3>我是父组件</h3>
        <slot name="header"></slot>
        <slot name="container"></slot>
    </div>
</template>

<!-- 子组件 -->
<template>
   <div>
      <slot name="header"></slot>
      <slot name="container"></slot>
   </div>
</template>

作用域插槽

在一些情况下，我们需要从子组件中将数据传递到父组件中。这时就可以使用v-slot指令来定义一个作用域插槽。

定义好作用域插槽后，父组件可以通过传递参数的方式获取子组件中的数据。

示例代码：

<!-- 父组件 -->
<template>
    <div>
        <h3>用户名</h3>
        <user-info v-slot="{ name }"></user-info>
        <p>{{ name }}</p>
    </div>
</template>

<!-- 子组件 -->
<template>
   <div>
      <slot :name="this.name"></slot>
   </div>
</template>
<script>
    export default {
        data() {
            return {
                name: '张三'
            }
        }
    }
</script>