Components - Slot: Slot anonymous anonymous slot

Single Slot | anonymous slot

1.1 <navigation-link> sub-assembly is defined as:

v-bind:href="url" class="nav-link"> <a 
  <slot> </ slot> 
</a> 
1.2 using such parent element <navigation-link> sub-assembly to look

<navigation-link url="/profile">
  Your Profile
</navigation-link>

1.3 would be rendered in HTML:

<a v-bind:href="url" class="nav-link">
  Your Profile
</a>

2. Named Slot

A plurality of slots needed may be utilized <slot> elements a special feature:name来定义具名插槽

 

2.1 <base-layout> subassembly template definition:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

 

2.2.1 Use parent component subassembly <base-layout>, using the slot on the node characteristics:

<base-layout>
  <h1 slot="header">Here might be a page title</h1>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <p slot="footer">Here's some contact info</p>
</base-layout>

 

2.2.2 outer sheath may be in a content node, and a node on the outer layer slot characteristics:

<base-layout>
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>

 

2.3 out of HTML rendering all will be:

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

 

3. Scope slot - band data slot

A single slot and the slot named slot does not bind the data, so the template provided by the parent component to include both the style and also includes data and scope slots are sub-component provides data , parent component only need to provide a set of styles

3.1 subcomponents:

<template>
  <div class="child">

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

 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    }
}

 

3.2 parent component:

<Template> 
  <div class = "Father"> 
    <H3> Here is the parent component </ H3> 
    <- first time:! use flex impression data -> 
    <Child> 
      <Template slot-scope = "User" > 
        <div class = "tmpl"> 
          <span V-for = "Item in user.data"> Item {} {} </ span> 
        </ div> 
      </ Template> 

    </ Child> 

    <-! second use views: display list data -> 
    <Child> 
      <Template slot-scope = "User"> 
        <UL> 
          <-V for Li = "Item in user.data"> Item {} {} </ Li> 
        < / UL> 
      </ Template> 

    </ Child>

    <! - Third use: direct display data -> 
    <Child> 
      <Template slot-scope = "User"> 
       {{}} user.data 
      </ Template> 

    </ Child>

    <! - Fourth Use: Do not use the data it provides, the scope becomes anonymous slot back slot -> 
    <Child> 
      I'm template 
    </ Child> 
  </ div> 
</ Template>