VUE - slots (especially important, especially scoped slots)

Ask for one key triple

I hope you like, follow and bookmark if you find it useful after reading it, thank you! ! !

focus

Sockets are particularly useful in component encapsulation, especially in component library projects. Because I didn't review the slots before, many things were very difficult to implement and I got stuck for many days.
But as long as you use slots, named slots, and scoped slots, many things can be easily solved. Slots make component packaging more flexible and make component libraries possible.

Know the slot

Use components more dynamically

---

Slot is a placeholder, let the parent component decide what element to use.
Slots are used when there are different needs

Use of slots

Put something that needs to be inserted in the middle of the subcomponent, and it corresponds to the position of the subcomponent slot.
Child component: The default value in the template indicates that this is a slot
Parent component:

   <show-message title="哈哈哈">
      <button>我是按钮元素</button>   //此时插槽中放的就是按钮
 </show-message>

The slot can set the default value, and the content written in the slot is the default value when nothing is passed

Multiple slots (named slot name=''name" #name)

If you use it directly without naming it, all the html elements placed when calling the subcomponent will be placed in one slot.
(2023.2.4 because I forgot this named slot, so the effect has been poor. Be sure to review it carefully and don’t always want to move forward!)

How to use, when calling the child component in the parent component, write <template v-solt: slot name> specific things in the child component
Child component: <slot name="left">left</slot>write the name on the slot
Parent component: It is recommended to use # and pay special attention to only Can be written on a template

<nav-bar>
<template #left>//这里用#插槽名来表示对应插槽名
  <button>{
   
   {leftcontent}}</button>
</template>
或者
<template v-slot:right>  //v-slot：插槽名
  <a href="#">登录</a>
</template>

Dynamic slots (to understand)

What to do when the image path is deep: use @

@/img/picture.jpg This is to find the img folder first and then find the picture

render scope

The simplicity is that the content in each component must be defined and used in this component, and cannot be called across components.
If it is written in this component, the data used must be the data in this component.
Example:
In the named slot just now, there is a slot in the parent component that is a button, and the content of the button is { { leftText}}, Then the content leftText of this template syntax must be defined in the parent component app.vue, that is, its data must be defined in this component.
Although it is displayed in the child component at the end, it is used in the parent component, so it must be defined in the parent component.

---

scoped slots (slots pass subcomponent properties)

We want to make a change to the previous case. The formats in the subcomponents of the previous case are hard-coded and defined in the subcomponents. For example, they are all spans and do not use slots. Then we hope to use Slots are used to make changes, which can be determined by the parent component to be a span or a button.
The first is to use the slot, then the span becomes the default value, and if the slot is not used, the default is span

		<slot >
          <span>{
    
    {
    
     item }}</span>
        </slot>

Then there is a problem: how to pass the item of the for loop in the child component to the parent component
(this is really important, because I don’t remember the usage of the scope slot, I got stuck for several days when I packaged the component myself, the basics are really It’s very important)

The slot of the parent component is like this, we can’t get this item,

so what we need to solve is the problem of passing information through a slot. When using the slot,
we can pass the data of the child component out. to the slot.

Operation of subcomponents: passing attributes

Write on the slot: Use: Bind an attribute to pass it out: item = "the attribute to be passed" There
is also a note here, that is:
in vue, a colon is added to the dynamically bound attribute:
while the static attribute Otherwise, for example, abc="cba" here is static,
but it is dynamic for item, so a colon must be added:

 <slot :item="item" abc="cba">
          <span>{
    
    {
    
     item }}</span>
        </slot>

Parent component operation: accept attributes and use

Use template #: slot name = "accept attribute name" Here, the props name is used by default (other names can be used). The
props here contains all the attributes passed by the slot, including item and abc,
which can be used in the template Received data props.item

  <template v-slot:name="props">
        <button>{
    
    {
    
     props.item }}</button>
      </template>
//另一种写法
 <template #name="props">
    <button>{
    
    {
    
     props.item }}</button>
  </template>

Here, you don't need to write the name, it is #="props", because there is only one default slot at this time!

This application scenario is really very practical and very common. What the teacher talked about are all examples of actual development

Syntactic sugar:
if there is only one default slot, then template can be omitted, because there is no need to write template, no need to be named
#="props" Pay


special attention to the last one, as long as there are multiple slots, please always use full for all slots The template-based syntax.

The rewriting case is wrong;
the latter cannot be written in the template, because
the content of the template tag in the specific elements that must be written in the template cannot be monitored, and display: none is set;

Correct way of writing: