Why are slots used in subcomponents?

This time I will bring you why slots are used in sub-components, and what are the precautions for using slot sub-components. The following is a practical case, let’s take a look.

Use slot scenario 1:

Sub component Minput.vue

<input type=&#39;text&#39;/>

Parent component Minput

<Minput>可以显示吗</Minput>

In this case, the text in the Minput tag is not It will be rendered

What if I want to render the text inside now

Easy to use slot

Subcomponent

<input type=&#39;text&#39;/>

In this case, the parent component The text inside can be rendered

Scenario 2: Named slot

Subcomponent he.vue

<header>
    <slot name=&#39;header&#39;></slot>
</header>

Parent component

<he>
    <h1 name=&#39;header&#39;>hello world</h1>
</he>

Rendered The result is

<header><h1>hello world</h1></header>

Scenario 3

Child component child

<div>
    <h1>这是h1</h1>
    <slot>这是分发内容,只有在没有分发内容的情况下显示</slot>
</div>

Parent component

<child>
    <p>这是一段p</p>
    <p>两段p</p>
</child>

Rendered is

<div><h1>这是h1</h1><p>这是一段p</p><p>两段p</p></div>

If parent component

<child></child>

Then what is rendered is

<div><h1>这是h1</h1>这是分发内容，只有在没有分发内容的情况下显示</div>

Scenario 4: Scope slot

<div class="child">
  <slot text="hello from child"></slot>
</div>

Parent component

<div class="parent">
  <child>
    <template slot-scope="props">
      <span>hello from parent</span>
      <span>{{ props.text }}</span>
    </template>
  </child>
</div>

xIf rendered, it is

<div class="parent">
  <div class="child">
    <span>hello from parent</span>
    <span>hello from child</span>
  </div>
</div>

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to make a "dot" border appear after clicking the button

Detailed explanation of the browser rendering process

How to make the input text box and img verification code

Commonly used input text box content is automatically vertically centered and defaults The prompt text click is empty

The above is the detailed content of Why are slots used in subcomponents?. For more information, please follow other related articles on the PHP Chinese website!