Vue 之 slot(插槽)

前言:

vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项在使用频率、使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”的想法,于是就关闭了vue的说明文档。

实际上,插槽的概念很简单,下面通过分三部分来讲。这三部分也是按照vue说明文档的顺序来写的。

进入这三部分之前,先让还没接触过插槽的同学对什么是插槽有一个简单的概念:插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示怎样显示

由于插槽是一块模板,所以,对于任何一个组件,从模板种类的角度来分,其实都可以分为非插槽模板插槽模板两大类。 非插槽模板指的是html模板,比如‘div、span、ul、table’这些,非插槽模板的显示与隐藏以及怎样显示由组件自身控制;插槽模板是slot,它是一个空壳子,因为它的显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置却由子组件自身决定,slot写在组件template的什么位置,父组件传过来的模板将来就显示在什么位置

一、理解vue中的slot

官网上对slot的理解是:

“Vue实现了一套内容分发的API,这套API基于当前的Web Components规范草案,将slot元素作为承载分发内容的接口”。

  在参考了很多资料之后,以下总结一下我对slot的理解:   slot的意思是插槽,Vue使用slot的作用是做内容分发。所谓的内容分发其实就是将父组件的内容放到子组件指定的位置叫做内容分发。   在我们的电脑主板上也有各种各样的插槽,有插CPU的,有插显卡的,有插内存的,有插硬盘的。我们可以理解slot为要占出当前的位置,方便我们插入内容。或者可以这样理解:要去吃饭了,儿子先去占座,然后等他爸爸来了再一起吃。   Vue的插槽分为匿名插槽(单个插槽/默认插槽)、具名插槽、作用域插槽(带数据的插槽)。 ####匿名插槽(单个插槽/默认插槽)

  • 无name属性
  • 在组件中只可以使用一次
  • 父组件提供样式和内容
  <!-- 父组件-->
<template>
    <div class="father">
    <h3>这里是父组件</h3>
    <chlid>
        <div class="tmp1">
            <span>Leaf 1</span>
            <span>Leaf 2</span>
            <span>Leaf 3</span>
            <span>Leaf 4</span>
            <span>Leaf 5</span>
        </div>
    </child>
    </div>
</template>
<script>
import Child from ‘@/components/child‘
export default {
    components:{
        child:child
    }
}
</script>
<style>
.tmp1 span{
    width: 50px;
    height: 50px;
    border:  1px solid black;
}
</style>
复制代码
<!--子组件-->
<template>
    <div>
        <slot></slot>
        <h2>child子组件部分</h2>
    </div>
</template>
复制代码

最终呈现效果:

如果改变子组件中的位置:

<template>
    <div>
        <h2>child子组件部分</h2>
      <slot></slot>
    </div>
</template>
复制代码

改变slot位置后的最终呈现效果如下:

只有在父组件的child下写了html模板,才能在子组件指定的位置放父组件的内容。插槽最后显示不显示是看父组件有没有在child下写模板,像下面一样:

<child>
    html模板
</child>
复制代码

####具名插槽

  • 有name属性
  • 在组件中可以使用N次
  • 父组件通过html模板上的slot属性关联具名插槽
  • 没有slot属性的html模板默认关联匿名模板
  • 父组件提供样式和内容
<!--父组件-->
<template>
    <div class="father">
    <h3>这里是父组件</h3>
    <chlid>
        <div class="tmp1" slot="up">
            <span>Leaf 1</span>
            <span>Leaf 2</span>
            <span>Leaf 3</span>
            <span>Leaf 4</span>
            <span>Leaf 5</span>
        </div>
    <div class="tmp1" slot="down">
            <span>Leaf 6</span>
            <span>Leaf 7</span>
            <span>Leaf 8</span>
            <span>Leaf 9</span>
            <span>Leaf 10</span>
        </div>
    </child>
    </div>
</template>
<script>
import Child from ‘@/components/child‘
export default {
    components:{
        child:child
    }
}
</script>
<style>
.tmp1 span{
    width: 50px;
    height: 50px;
    border:  1px solid black;
}
</style>
复制代码
<!--子组件-->
<template>
    <div>
        <slot name="up"></slot>
        <h2>chlid子组件部分</h2>
        <slot name="down"></slot>
    </div>
</template>
复制代码

最终呈现效果:

####作用域插槽(带数据的插槽)

  • 父组件只提供样式,子组件提供内容
  • 在slot上面绑定数据
  • 子组件的值可以传给父组件使用
  • 父组件展示子组件数据有3种方式:flex显示列表显示直接显示
  • 使用slot-scope必须使用template
  • scope返回的值是slot标签上返回的所有属性值,并且是一个对象的形式保存起来
  • slot有两个属性,一个row,另一个是index
<!--父组件-->
<template>
    <div class="father">
    <h3>这里是父组件</h3>
    <chlid>
      <!-- 第一次使用:用flex展示数据 -->
        <template slot-scope="user">
            <div class="tmp1">
                <span v-for="(item,index) in user.data" :key="index">{{item}}</span>
            </div>
        </template>
        <!-- 第二次使用:用列表展示数据 -->
        <template slot-scope="user">
            <ul>
                <li v-for="(item,index) in user.data" :key="index">{{item}}</li>
            </ul>
        </template>
        <!-- 第三次使用:直接显示 -->
        <template slot-scope="user">
          {{user.data}}
        </template>
    </child>
    </div>
</template>
<script>
import Child from ‘@/components/child‘
export default {
    components:{
        child:child
    }
}
</script>
<style>
.tmp1 span{
    width: 50px;
    height: 50px;
    border:  1px solid black;
}
</style>
复制代码
<!--子组件-->
<template>
    <div>
        <h2>chlid子组件部分</h2>
        <slot :data="data"></slot>
    </div>
</template>
<script>
export default {
  props: ["message"],
  data () {
      return {
          data: [‘‘小庄‘,‘CC‘,‘小张‘,‘小林‘,‘Leaf‘,‘Bob‘]
      }
  }
}
</script>
复制代码

通过3种方式显示数据的最终呈现效果分别如下: 1、flex显示

2、列表显示 3、直接显示

这里我们所看到的数据“‘小庄‘,‘CC‘,‘小张‘,‘小林‘,‘Leaf‘,‘Bob‘”都是子组件data提供的数据,父组件如果要使用这些数据必须要通过template模板结合slot-scope来呈现。

这里只是将自己学到的知识做一个总结,方便自己记忆和查阅,可能会有错,望大神指点!

作者:Leaf_hyc
链接:https://juejin.im/post/5c83aa1b5188257ddb6af526
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文地址:https://www.cnblogs.com/ning123/p/11146134.html

时间: 2024-11-09 06:01:19

Vue 之 slot(插槽)的相关文章

Vue.js slot插槽

1.个人理解的插槽 之所以使用组件,就是因为组件可以将复杂的页面分割成多个部分,每个 部分就是一个组件(也是一个vue文件).要使用这个组件,只需要引入组件文件,并在模版中写入组件标签即可,引入了这个子组件,就相当于引入了这个组件的html模版,例如: // App.vue <template> <div id="app"> <Child /> </div> </template> // Child组件 <templat

vue slot插槽的使用

slot插槽的使用场景 父组件向子组件传递dom时会用到插槽 作用域插槽:当同一个子组件想要在不同的父组件里展示不同的状态,可以使用作用域插槽.展示的状态由父组件来决定 注:想要修改父组件向子组件传递的元素的样式时,只能在对应的子组件进行修改 1.具名插槽的使用  父组件 <template slot="header"> <p>我是头部</p> </template> 子组件 <slot name="header"

slot插槽(学习笔记)

slot插槽(有默认值,也有名称)一般情况下通过名称进行匹配什么是插槽,有什么用?插槽相当于插入的一个东西,可以用来灵活的封装组件,比如说封装一个模态框对组件进行内容的定制,slot插槽,一对组件标签中的结构,最终会被插入到组件的模板中去的使用方法思路:子组件定义完成.需要灵活的改变子组件里面的东西.可以在子组件注册的标签里面写<slot></slot>来完成内容替换,当然有name来进行标识是最好的 案例: <!DOCTYPE html> <html lang=

Vuejs之Component slot 插槽详解

Vuejs的component的数据进行了沙箱隔离,除js全局变量如Math, Date之类外无法访问用户自定义的变量,所以使用component写组件或嵌套组件时明白变量的访问非常重要 编译作用域 在看componnent的使用之前,来看下component编译作用域,明白作用域范围才能顺利写出想要的组件 假设我们有一个组件child-component,在父组件中代码如下: <child-component> {{ message }} </child-component> 编

vue学习之插槽

插槽 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. 个人理解:我感觉插槽就是父组件控制插槽的内容.他是用什么标签展示的,以及他要展示的内容.子组件来控制插槽插入的位置. 插槽的分类:插槽分为三种.匿名插槽,具名插槽,还有作用域插槽 匿名插槽:也就是默认插槽.把父组件中的内容默认插入到子组件的中<slot></slot>只的位置. 下面是展示在页面中的效果 具名插槽: 具名插

vue slot插槽的使用方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> </head> <

Vue slot 插槽

Vue  的插槽感觉上是一个组件函数,和函数一样进行参数的传递来改变组件的据题内容. 使用指令:v-slot //插口的基本使用 <body> <div id="app"> <!-- 传入元素参数 --> <login><span>demo</span></login> </div> </body> <template id="login"> &l

vue中的插槽slot理解

本篇文章参考赛冷思的个人博客 1.函数默认传参 在我们写js函数我们的可能会给他们一个默认的参数,写法是 function show(age,name){ var age = age || 20; var name = name || 张三; console.log(age,name); } show(); // 20,张三 show(18,"命名") // 18,明明 如果用户不传入参数,那么会输出默认值,如果用户传入,会输出传入的值,这种写法很灵活 vue中的组件,也可以有默认的模

Vue系列:Slot 插槽的使用范例

插槽对于自定义的组件开发来说,是十分强大的功能.这篇主要做个简单梳理 插槽可以分3种: 1.简单插槽 2.具名插槽 3.作用域插槽 原文地址:https://www.cnblogs.com/One-sprite/p/10096380.html