Vue.js : 插槽slot的使用

最新推荐文章于 2024-02-19 14:27:12 发布

ikunsdc

最新推荐文章于 2024-02-19 14:27:12 发布

阅读量191

点赞数 1

分类专栏： Vue.js 开发文章标签： vue.js

By ikunsdc

本文链接：https://blog.csdn.net/m0_55331605/article/details/114649928

版权

Vue.js 开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一丶插槽slot

（一）slot翻译为插槽

插槽的目的是让我们原来的设备具有更多的扩展性
比如电脑的USB插槽，可以插入U盘，键盘，鼠标等

（二）组件的插槽

组件的插槽也是为封装的组件更具有扩展性
组件内部的展示什么，由外界来决定

插槽即预留的空间。一般定义可复用性组件时，使用插槽

二丶插槽基本使用

代码


<!--作者：ikunsdc-->
<!--开发时间：2021/03/11 00:08-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--1.插槽的基本使用，<slot></slot>-->
<!--2.插槽的默认值 <slot>button</slot>-->
<!--3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素-->
<div id="app">
  <cpn><button>按钮</button></cpn>
  <cpn>
    <i>呵呵呵</i>
    <div>我是DIV元素</div>
    <p>我是段落</p>
  </cpn>
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是key</h2>
    <p>我是内容</p>
    <slot></slot>
    <hr>
  </div>
</template>

<template id="cpn2">
      <slot></slot>
      <hr>
    </div>
  </template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{

    },
    components:{
      cpn:{
        template:'#cpn'
      }
    }
  })
</script>
</body>
</html>

运行

三丶具名插槽的使用

当组件中由多个插槽时，给每个插槽命名，调用时指定替换哪个插槽

代码

<!--作者：ikunsdc-->
<!--开发时间：2021/03/11 00:08-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn>

  </cpn>
  <hr>
  <cpn>
<!--    替换时，根据名字，指定替换某个插槽-->
    <span slot="center">标题</span>
    <span slot="left">返回</span>
    <span slot="right">更多</span>
  </cpn>
</div>

<template id="cpn">
  <div>
<!--   给slot取名， slot中间均是默认值-->
  <slot name="left"><span>左边</span></slot>
  <slot name="center"><span>中间</span></slot>
  <slot name="right"><span>右边</span></slot>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{

    },
    components:{
      cpn:{
        template:'#cpn'
      }
    }
  })
</script>

</body>
</html>

运行

—— Git ——

ikunsdc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue.js : 插槽slot的使用

一丶插槽slot（一）slot翻译为插槽插槽的目的是让我们原来的设备具有更多的扩展性比如电脑的USB插槽，可以插入U盘，键盘，鼠标等（二）组件的插槽组件的插槽也是为封装的组件更具有扩展性组件内部的展示什么，由外界来决定插槽即预留的空间。一般定义可复用性组件时，使用插槽二丶插槽基本使用代码<!DOCTYPE html><html
复制链接

扫一扫