06-Vue插槽Slot

最新推荐文章于 2024-03-18 21:33:45 发布

ChengLang_111

最新推荐文章于 2024-03-18 21:33:45 发布

阅读量231

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_47299953/article/details/112767021

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

slot基本使用

了解了为什么用slot，我们再来谈谈如何使用slot？

在子组件中，使用特殊的元素<slot>就可以为子组件开启一个插槽。
该插槽插入什么内容取决于父组件如何使用。

在这里插入图片描述

可以给定插槽默认值，如果没有传值则使用默认值

 <slot>
      <button>我是插槽</button>
 </slot> <!--可以给定插槽默认值 ， 如果没有传值 则使用默认值-->

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
<div id="app">
  <cpn>
    <button>按钮</button>
  </cpn> <!--使用插槽-->
  <cpn><span>span</span></cpn>
  <cpn><i>嘿嘿</i></cpn>
  <cpn></cpn><!--没有传值则使用默认值-->
</div>

<template id="cpn">
  <div>
    <h2>我是标题</h2>
    <p>我是内容</p>
    <!--    <slot></slot> &lt;!&ndash;插槽 令组件具有扩展性&ndash;&gt;-->
    <slot>
      <button>我是插槽</button>
    </slot> <!--可以给定插槽默认值 ， 如果没有传值 则使用默认值-->
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    components: {
      cpn: {
        template: '#cpn',
      },

    }

  })
</script>
</body>

</html>

具名插槽slot

当子组件的功能复杂时，子组件的插槽可能并非是一个。

比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？
这个时候，我们就需要给插槽起一个名字

如何使用具名插槽呢？
非常简单，只要给slot元素一个name属性即可

<slot name='myslot'></slot>

我们来给出一个案例：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
<div id="app">
  <!--  会替换具有对应name的slot-->
  <cpn><span slot="center">标题</span></cpn>
</div>


<template id="cpn">
  <div>
    <h2>我是标题</h2>
    <p>我是内容</p>

    <!--多个slot-->
    <slot name="left">
      <button>左边</button>
    </slot>
    <slot name="center">
      <button>中间</button>
    </slot>
    <slot name="right">
      <button>右边</button>
    </slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    components: {
      cpn: {
        template: '#cpn',
      },

    }

  })
</script>
</body>

</html>

作用域插槽

作用域插槽是slot一个比较难理解的点，而且官方文档说的又有点不清晰。
这里，我们用一句话对其做一个总结，然后我们在后续的案例中来体会：

简单来说就是数据是由子组件提供的，而这个组件再不同的界面使用需要以不同的方式展现，这个时候就可以利用作用域插槽了

在这里插入图片描述
在父组件使用我们的子组件时，从子组件中拿到数据：
我们通过<template slot-scope="slot">获取到movies属性
在通过movies.data就可以获取到刚才我们传入的data了

在这里插入图片描述

ChengLang_111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06-Vue插槽Slot

slot基本使用了解了为什么用slot，我们再来谈谈如何使用slot？在子组件中，使用特殊的元素<slot>就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。可以给定插槽默认值，如果没有传值则使用默认值 <slot> <button>我是插槽</button> </slot> <!DOCTYPE html
复制链接

扫一扫