vue插槽

默认插槽（匿名插槽），具名插槽，作用域插槽。。。

以下代码建立在Vue2环境下

封装一个组件，以便复用：

// MyHeader.vue
<!-- 封装一个组件 -->
 <template>
    <div>
        <h1>不要生气</h1>

        <!-- 留个位置，放需要变化的东西 -->
        <slot></slot>

        <p>不要生气，不要生气，生气给魔鬼留余地</p>
    </div>
 </template>

使用组件：

// App.vue
<template>
  <div id="app">
    <MyHeader>
      <p>加油</p>
    </MyHeader>
  </div>
</template>

<script>

import MyHeader from './views/MyHeader.vue'
export default {
  name: 'App',
  components: {
    MyHeader
  }
}
</script>

<style>

</style>

页面效果：

上面使用的是默认插槽 slot 。

个人感觉插槽就是在一个想要复用的组件中留出位置，可以根据使用场景的不同插入不同的内容，让组件的复用更加灵活。

具名插槽：表象上是匿名插槽加上了名字

// MyHeader.vue
<!-- 封装一个组件 -->
 <template>
    <div>
        <h1>不要生气</h1>

        <!-- 放用户需要的东西 -->
        <slot name="slot1"></slot>

        <p>不要生气，不要生气，生气给魔鬼留余地</p>
    </div>
 </template>

// App.vue
<template>
  <div id="app">
    <MyHeader>
      <template #slot1>
        <p>具名插槽</p>
      </template>
    </MyHeader>
  </div>
</template>

<script>

import MyHeader from './views/MyHeader.vue'
export default {
  name: 'App',
  components: {
    MyHeader
  }
}
</script>

具名插槽的页面效果和匿名插槽的差不多，不展示了。

作用域插槽：就是在匿名插槽或具名插槽的基础上，使用msg传递数据

// MyHeader.vue
<!-- 封装一个组件 -->
 <template>
    <div>
        <h1>不要生气</h1>

        <!-- 放用户需要的东西 -->
        <slot msg="hi"></slot>
        <slot name="slot3" msg="hollo"></slot>

        <p>不要生气，不要生气，生气给魔鬼留余地</p>
    </div>
 </template>

// App.vue
<template>
  <div id="app">
    <MyHeader>
      <template #default="obj">
        <p>{{obj.msg}},匿名插槽+数据</p>
      </template>
    </MyHeader>
    <MyHeader>
      <template #slot3="obj">
        <p>{{obj.msg}},具名插槽+数据</p>
      </template>
    </MyHeader>
  </div>
</template>

<script>

import MyHeader from './views/MyHeader.vue'
export default {
  name: 'App',
  components: {
    MyHeader
  }
}
</script>

页面效果：

匿名插槽、具名插槽和作用域插槽可以看做一个对象中的属性，调用各自的函数。

简单点理解，匿名插槽和具名插槽就是属性名不一样，作用域插槽就是在函数中传递了数据。

如果本文对你有帮助，希望能得到你的点赞或收藏或关注，这是对我最好的鼓励；

如你有问题或疑惑，欢迎在评论区写下，必将努力解答；

如本文有误区，希望你不吝赐教，让我们共勉！