search
HomeWeb Front-endJS TutorialThe specific usage of slot and slot-scope in vue
The specific usage of slot and slot-scope in vueMay 14, 2018 pm 05:22 PM
slotInstructions

This article mainly introduces the specific use of slot and slot-scope in vue. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Written before

The documentation about slots in vue is very short, and the language is very concise, plus its and Differences in the frequency and order of use of common options such as methods, data, computed, etc. may cause developers who are new to slots to easily think "Forget it, learn it later, you can already write basic components anyway", so Just close the vue documentation.

In fact, the concept of slots is very simple. Let’s talk about it in three parts. This part is also written in the order of the vue documentation.

Before entering the third part, let students who have not been exposed to slots have a simple concept of what a slot is: a slot, also known as a slot, is an HTML template of a component. This template displays Whether or not to display and how to display it is determined by the parent component. In fact, the two core issues of a slot are highlighted here, which are whether to display it and how to display it.

Since the slot is a template, any component can actually be divided into two categories: non-slot templates and slot templates from the perspective of template type.

Non-slot templates refer to html templates, which refer to 'p, span, ul, table', etc. The display and hiding of non-slot templates and how to display them are controlled by the plug-in itself; plug-in The slot template is a slot, which is an empty shell, because its display and hiding and the final html template used to display are controlled by the parent component. However, the position of the slot display is indeed determined by the sub-component itself. Where the slot is written in the component template, the template passed from the parent component will be displayed in the future.

Single slot|Default slot|Anonymous slot

The first is a single slot. A single slot is the official name of vue, but in fact It can also be called a default slot, or as opposed to a named slot, we can call it an anonymous slot. Because it does not need to set the name attribute.

A single slot can be placed anywhere in the component, but as its name suggests, there can only be one slot of this type in a component. Correspondingly, there can be many named slots, as long as the names (name attribute) are different.

The following is an example.

Parent component:

<template>
 <p class="father">
  <h3 id="这里是父组件">这里是父组件</h3>
  <child>
   <p class="tmpl">
    <span>菜单1</span>
    <span>菜单2</span>
    <span>菜单3</span>
    <span>菜单4</span>
    <span>菜单5</span>
    <span>菜单6</span>
   </p>
  </child>
 </p>
</template>

Child component:

<template>
 <p class="child">
  <h3 id="这里是子组件">这里是子组件</h3>
  <slot></slot>
 </p>
</template>

In this example, because the parent component writes the html template in , Then the template for the anonymous slot of the subcomponent is as follows. In other words, the anonymous slot of the subcomponent is used by the template below.

<p class="tmpl">
 <span>菜单1</span>
 <span>菜单2</span>
 <span>菜单3</span>
 <span>菜单4</span>
 <span>菜单5</span>
 <span>菜单6</span>
</p>

The final rendering result is as shown in the figure:

Note: All demos have been styled for easier observation. Among them, the parent component is filled with a gray background, and the child components are filled with a light blue background.

Named slot

Anonymous slot does not have a name attribute, so it is an anonymous slot. Then, if the name attribute is added to the slot, it becomes a named slot. . A named slot can appear N times in a component. Appear in different locations. The following example is a component with two named slots and a single slot. These three slots are displayed by the parent component using the same set of CSS styles, but the content is slightly different.

Parent component:

<template>
 <p class="father">
 <h3 id="这里是父组件">这里是父组件</h3>
 <child>
  <p class="tmpl" slot="up">
  <span>菜单1</span>
  <span>菜单2</span>
  <span>菜单3</span>
  <span>菜单4</span>
  <span>菜单5</span>
  <span>菜单6</span>
  </p>
  <p class="tmpl" slot="down">
  <span>菜单-1</span>
  <span>菜单-2</span>
  <span>菜单-3</span>
  <span>菜单-4</span>
  <span>菜单-5</span>
  <span>菜单-6</span>
  </p>
  <p class="tmpl">
  <span>菜单->1</span>
  <span>菜单->2</span>
  <span>菜单->3</span>
  <span>菜单->4</span>
  <span>菜单->5</span>
  <span>菜单->6</span>
  </p>
 </child>
 </p>
</template>

Child component:

<template>
 <p class="child">
 // 具名插槽
 <slot name="up"></slot>
 <h3 id="这里是子组件">这里是子组件</h3>
 // 具名插槽
 <slot name="down"></slot>
 // 匿名插槽
 <slot></slot>
 </p>
</template>

The display result is as shown in the figure:

You can see that the parent component is uploaded through the html template The slot attribute associates the named slot. HTML templates without slot attributes are associated with anonymous slots by default.

Scope slot | Slot with data

Finally, there is our scope slot. This one is a little harder to understand. Officially, it is called a scope slot. In fact, compared with the previous two slots, we can call it a slot with data. What does it mean? The first two are written in the template of the component.

Anonymous slot

<slot></slot>

Named slot

<slot name="up"></slot>

But the scope slot requires, Bind data to the slot. That is to say, you have to write it roughly like the following.

<slot name="up" :data="data"></slot>
 export default {
 data: function(){
  return {
  data: [&#39;zhangsan&#39;,&#39;lisi&#39;,&#39;wanwu&#39;,&#39;zhaoliu&#39;,&#39;tianqi&#39;,&#39;xiaoba&#39;]
  }
 },
}

As we said before, whether the slot is displayed at the end depends on whether the parent component has written a template under the child, as shown below.

<child>
 html模板
</child>

If it is written, the slot must display something on the browser. The thing is what HTML should look like. If it is not written, the slot is just an empty shell with nothing.
OK, when we say that there is an html template, it means that the parent component will insert the template into the child component. So what kind of style should be inserted? This is jointly determined by the html+css of the parent component, but this set What about the content inside the style?

Because the scope slot is bound to a set of data, the parent component can use it. So, the situation becomes like this: the parent component has the final say in style, but the content can display the slot binding of the child component.

我们再来对比,作用域插槽和单个插槽和具名插槽的区别,因为单个插槽和具名插槽不绑定数据,所以父组件是提供的模板要既包括样式由包括内容的,上面的例子中,你看到的文字,“菜单1”,“菜单2”都是父组件自己提供的内容;而作用域插槽,父组件只需要提供一套样式(在确实用作用域插槽绑定的数据的前提下)。

下面的例子,你就能看到,父组件提供了三种样式(分别是flex、ul、直接显示),都没有提供数据,数据使用的都是子组件插槽自己绑定的那个人名数组。

父组件:

<template>
 <p class="father">
 <h3 id="这里是父组件">这里是父组件</h3>
 <!--第一次使用:用flex展示数据-->
 <child>
  <template slot-scope="user">
  <p class="tmpl">
   <span v-for="item in user.data">{{item}}</span>
  </p>
  </template>

 </child>

 <!--第二次使用:用列表展示数据-->
 <child>
  <template slot-scope="user">
  <ul>
   <li v-for="item in user.data">{{item}}</li>
  </ul>
  </template>

 </child>

 <!--第三次使用:直接显示数据-->
 <child>
  <template slot-scope="user">
  {{user.data}}
  </template>

 </child>

 <!--第四次使用:不使用其提供的数据, 作用域插槽退变成匿名插槽-->
 <child>
  我就是模板
 </child>
 </p>
</template>

子组件:

<template>
 <p class="child">

 <h3 id="这里是子组件">这里是子组件</h3>
 // 作用域插槽
 <slot :data="data"></slot>
 </p>
</template>

 export default {
 data: function(){
  return {
  data: [&#39;zhangsan&#39;,&#39;lisi&#39;,&#39;wanwu&#39;,&#39;zhaoliu&#39;,&#39;tianqi&#39;,&#39;xiaoba&#39;]
  }
 }
}

结果如图所示:

相关推荐:

vue.js数据传递以及数据分发slot实例详解

Vue内容分发slot

js组件SlotMachine实现图片切换效果制作抽奖系统_javascript技巧

The above is the detailed content of The specific usage of slot and slot-scope in vue. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
php如何使用PHP的Intl扩展?php如何使用PHP的Intl扩展?May 31, 2023 pm 08:10 PM

PHP的Intl扩展是一个非常实用的工具,它提供了一系列国际化和本地化的功能。本文将介绍如何使用PHP的Intl扩展。一、安装Intl扩展在开始使用Intl扩展之前,需要安装该扩展。在Windows下,可以在php.ini文件中打开该扩展。在Linux下,可以通过命令行安装:Ubuntu/Debian:sudoapt-getinstallphp7.4-

如何使用CakePHP中的数据库查询构造器?如何使用CakePHP中的数据库查询构造器?Jun 04, 2023 am 09:02 AM

CakePHP是一个开源的PHPMVC框架,它广泛用于Web应用程序的开发。CakePHP具有许多功能和工具,其中包括一个强大的数据库查询构造器,用于交互性能数据库。该查询构造器允许您使用面向对象的语法执行SQL查询,而不必编写繁琐的SQL语句。本文将介绍如何使用CakePHP中的数据库查询构造器。建立数据库连接在使用数据库查询构造器之前,您首先需要在Ca

php如何使用CI框架?php如何使用CI框架?Jun 01, 2023 am 08:48 AM

随着网络技术的发展,PHP已经成为了Web开发的重要工具之一。而其中一款流行的PHP框架——CodeIgniter(以下简称CI)也得到了越来越多的关注和使用。今天,我们就来看看如何使用CI框架。一、安装CI框架首先,我们需要下载CI框架并安装。在CI的官网(https://codeigniter.com/)上下载最新版本的CI框架压缩包。下载完成后,解压缩

php如何使用PHP的Ctype扩展?php如何使用PHP的Ctype扩展?Jun 03, 2023 pm 10:40 PM

PHP是一种非常受欢迎的编程语言,它允许开发者创建各种各样的应用程序。但是,有时候在编写PHP代码时,我们需要处理和验证字符。这时候PHP的Ctype扩展就可以派上用场了。本文将就如何使用PHP的Ctype扩展展开介绍。什么是Ctype扩展?PHP的Ctype扩展是一个非常有用的工具,它提供了各种函数来验证字符串中的字符类型。这些函数包括isalnum、is

php如何使用CI4框架?php如何使用CI4框架?Jun 01, 2023 pm 02:40 PM

PHP是一种广泛使用的服务器端脚本语言,而CodeIgniter4(CI4)是一个流行的PHP框架,它提供了一种快速而优秀的方法来构建Web应用程序。在这篇文章中,我们将通过引导您了解如何使用CI4框架,来使您开始使用此框架来开发出众的Web应用程序。1.下载并安装CI4首先,您需要从官方网站(https://codeigniter.com/downloa

php如何使用PHP的socket编程功能?php如何使用PHP的socket编程功能?Jun 03, 2023 pm 09:51 PM

PHP是一门广泛应用于Web开发的编程语言,支持许多网络编程应用。其中,Socket编程是一种常用的实现网络通讯的方式,它能够让程序实现进程间的通讯,通过网络传输数据。本文将介绍如何在PHP中使用Socket编程功能。一、Socket编程简介Socket(套接字)是一种抽象的概念,在网络通信中代表了一个开放的端口,一个进程需要连接到该端口,才能与其它进程进行

php如何使用PHP的DOM扩展?php如何使用PHP的DOM扩展?May 31, 2023 pm 06:40 PM

PHP的DOM扩展是一种基于文档对象模型(DOM)的PHP库,可以对XML文档进行创建、修改和查询操作。该扩展可以使PHP语言更加方便地处理XML文件,让开发者可以快速地实现对XML文件的数据分析和处理。本文将介绍如何使用PHP的DOM扩展。安装DOM扩展首先需要确保PHP已经安装了DOM扩展,如果没有安装需要先安装。在Linux系统中,可以使用以下命令来安

php如何使用PHP的geoip扩展?php如何使用PHP的geoip扩展?Jun 01, 2023 am 09:13 AM

PHP是一种流行的服务器端脚本语言,它可以处理网页上的动态内容。PHP的geoip扩展可以让你在PHP中获取有关用户位置的信息。在本文中,我们将介绍如何使用PHP的geoip扩展。什么是PHP的GeoIP扩展?PHP的geoip扩展是一个免费的、开源的扩展,它允许你获取有关IP地址和位置信息的数据。该扩展可以与GeoIP数据库一起使用,这是一个由MaxMin

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)