Detailed explanation of the steps for using slot and slot-scope in vue-JS Tutorial-php.cn

This time I will bring you a detailed explanation of the steps for using slot and slot-scope in vue. What are the precautions for using slot and slot-scope in vue. The following is a practical case. Get up and take a look.

This article introduces the specific usage tutorial of slot and slot-scope in vue. Friends in need come and take a look

Write in front

The document description about slots in vue is very short, and the language is very concise. In addition, it is different from the frequency and order of use of common options such as methods, data, computed, etc., this is possible causing the first Developers who come into contact with slots are prone to "Forget it, learn it later, you can already write basic components anyway", so they close the Vue documentation.

In fact, the concept of slots is very simple, and the following is divided into 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. Whether this template is displayed, and how to display it The display 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; the slot template is a slot, which is an empty space. Shell, because its display and hiding and what kind of html template is finally displayed 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 parent component passes it. The template 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 a 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 name (name attribute sex) is different.

This is demonstrated below with an example.

Parent component:

<template>
 <p class="father">
  <h3>这里是父组件</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>

Copy after login

Subcomponent:

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

Copy after login

In this example, because the parent component has an HTML template written in , the template for the anonymous slot of the child component is as follows. In other words, anonymous insertion of subcomponents The slot 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>

Copy after login

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

Named slot

The 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. below An 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>这里是父组件</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>

Copy after login

Subcomponent:

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

Copy after login

As you can see, the parent component is associated with the named slot through the slot attribute on the html template. 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 to write

in the template of the component. Anonymous Slots

<slot></slot>

Copy after login

Named Slot

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

Copy after login

However, the scope slot requires binding data on 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: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
  }
 },
}

Copy after login

我们前面说了，插槽最后显示不显示是看父组件有没有在child下面写模板，像下面那样。

<child>
 html模板
</child>

Copy after login

写了，插槽就总得在浏览器上显示点东西，东西就是html该有的模样，没写，插槽就是空壳子，啥都没有。
OK，我们说有html模板的情况，就是父组件会往子组件插模板的情况，那到底插一套什么样的样式呢，这由父组件的html+css共同决定，但是这套样式里面的内容呢？

正因为作用域插槽绑定了一套数据，父组件可以拿来用。于是，情况就变成了这样：样式父组件说了算，但内容可以显示子组件插槽绑定的。

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

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

父组件：

<template>
 <p class="father">
 <h3>这里是父组件</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>

Copy after login

子组件：

<template>
 <p class="child">
 <h3>这里是子组件</h3>
 // 作用域插槽
 <slot :data="data"></slot>
 </p>
</template>
 export default {
 data: function(){
  return {
  data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
  }
 }
}

Copy after login

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！