vue assembly 4 content to be delivered using a slot assembly

In addition to the incoming data into the assembly as a prop, vue also allows incoming HTML

Subassembly parent components: <custom-button> I site <custom-button />

custom-button子组件：<span> <slot></slot> </sapn>

Generates a <span> point I </ span>

Not only you can pass a string, can also pass any html you want, and even other components, which can create complex page, and will not let the assembly volume becomes too large

The default content

If solt element sets the default content, then the content will be treated as the default content when the component does not receive the content use

Named Slot

We say that the above is a single slot, this slot is the most common usage, of course, is the most easily understood, is passed to the component will replace it inside the slot output elements onto the page.

In addition we have named slot. Named slot, which allows you to have multiple slots in the same assembly

<HelloWorld msg="Welcome to Your Vue.js App" :input="input">
      <button>hah</button>
      <div slot="header"> <span style="color:red">哈哈</span> </div>
    </HelloWorld>

Subassembly

<span>这里 <slot name="header"></slot>
     </span>

Will generate

Here 
Haha

We specify an element that should be inserted into the slot named header will be inserted into other unnamed slots

Scope slot

Data can be passed back to the slot component, the parent component elements can access the data in a subcomponent

// Create a user information acquisition components, while the display data is left to the parent element to process 
    Vue.component ( ' User-Data ' , { 
      Template: " <div class = 'User'> <SOLT: = User ' User '> </ slot> </ div> " , 
      Data :() => ({ 
      User: " Test " 
      }), 
      Mounted () { 
        // set this.user 
      } 
    })

Any attributes are passed to a slot by slot-scope attribute variables defined to obtain

<div>
    <user-data >

　　　　 <Template v-slot = "user"> // v-slot = 'user' === slot-scope = "user" v-slot for the latest official grammar        　　

username:

{{user.user.name}}

      　</template>

    </user-data>
</div>

Scope slot structure

Deconstruction slot-scope attribute using the same parameters as the destructor deconstructed {}