slot插槽、具名插槽，作用域插槽的使用

最新推荐文章于 2024-05-28 17:25:55 发布

qq_44165941

最新推荐文章于 2024-05-28 17:25:55 发布

阅读量772

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44165941/article/details/108843612

版权

vue 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

文章目录

前言
一、slot的基本使用
二、具名插槽的使用
三、作用域插槽的使用
总结

前言

slot插槽使组件具有扩展性。
这部分我们要学习slot的基本使用、具名插槽的使用以及作用域插槽的使用

一、slot的基本使用

<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。

详细用法，请参考下面教程的链接。
slot插槽使用

1.使用步骤

(1) 子模板中加入slot标签，用于预留空间；
其中<slot>标签内为默认值。

(2) 在<cpn>标签内加入其他标签使用，例如h2 、button、input 标签等等；
当<cpn>内有多个标签时，多个标签将替换每一个<slot>标签。

2.图片分析

在这里插入图片描述

3.运行效果

在这里插入图片描述

4.代码

<!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></cpn>
    <cpn>
      <h3>slot1yayaya</h3>
      <p>按钮被覆盖</p>
    </cpn>
    <cpn></cpn>
    <cpn></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>我是子组件模板</h2>
      <slot></slot>
      <slot><button>按钮</button></slot>
    </div>
  </template>

  <script src="../vue.js"></script>

  <script>
    let app = new Vue({
      el: '#app',
      data:{
        message:'hello'
      },
      components:{
        cpn:{
          template:'#cpn'
        }
      }
    }
    )
  </script>

</body>

</html>

二、具名插槽的使用

具名插槽可用于修改指定name的slot。

1.使用步骤

（1）为<slot>标签命名
（2）使用其他标签替换指定name的<slot>内容

2.图片分析

在这里插入图片描述

3.对比效果

在这里插入图片描述

4.相应代码

<!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></cpn>
    <cpn>
      <button  slot="left">返回</button>
      <input type="text" slot="medial">
    </cpn>
  </div>

  <template id="cpn">
    <div>
      <slot name='left'>左边</slot>
      <slot name='medial'>中间</slot>
      <slot name='right'>右边</slot>
    </div>
  </template>

  <script src="../vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      components: {
        cpn: {
          template: '#cpn'
        }
      }
    })
  </script>
</body>

</html>

三、作用域插槽的使用

核心：父组件替换插槽的标签，但是内容由子组件来提供。
为了更好地理解，此处用案例说明：
子组件cpn中有一个数组pLanguages，我们要对其进行新的排列方式。由于需要访问子组件当中的数据，所以需要石油作用域插槽。

1.使用步骤

（1）为<slot>动态绑定自定义属性data（可以任意取名），其中data指向子组件中的数据pLanguages。
（2）使用<template>标签属性 slot-scope= 'slot’，此时可以用slot访问slot标签内的属性
（3）slot.data指向pLanguages

2.图片分析

在这里插入图片描述

3.对比效果

在这里插入图片描述

4.相应代码

<!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>
  <!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></cpn>
      <cpn>
        <template slot-scope='slot'>
          <!-- <span v-for='item in slot.data'>{{item}} * </span> -->
          <span>{{slot.data.join(' * ')}}</span>
        </template>
      </cpn>
      <cpn>
        <template slot-scope='slot'>
          <!-- <span v-for='item in slot.data'>{{item}} - </span> -->
          <span>{{slot.data.join(' - ')}}</span>
        </template>
      </cpn>
    </div>

    <template id="cpn">
      <div>
        <slot v-bind:data='pLanguages'>
          <ul>
            <li v-for='item in pLanguages'>{{item}}</li>
          </ul>
        </slot>
      </div>
    </template>
    <script src="../vue.js"></script>
    <script>
      let app = new Vue({
        el: '#app',
        components: {
          cpn: {
            template: '#cpn',
            data() {
              return {
                pLanguages: ['javascript', 'c++', 'java', 'c#', 'python']
              }
            }
          }
        }
      })
    </script>
  </body>

  </html>
</body>

</html>

总结

（1）为了使组件扩展性更好，我们需要使用slot插槽。
（2）根据不同的需要，我们要选择合适的方式。

qq_44165941

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
slot插槽、具名插槽，作用域插槽的使用

文章目录前言一、slot的基本使用1.使用步骤2.图片分析3.运行效果4.代码二、具名插槽的使用1.使用步骤2.图片分析3.对比效果4.相应代码三、作用域插槽的使用1.使用步骤2.图片分析3.对比效果4.相应代码总结前言slot插槽使组件具有扩展性。这部分我们要学习slot的基本使用、具名插槽的使用以及作用域插槽的使用一、slot的基本使用<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。详细用法，请参考下面教程的链接。slot插槽使
复制链接

扫一扫