1. Component-slot

  • Concept: Used to implement content distribution of components. Through slot tags, content written to component tags can be received

  • Slot technology is used when a part of the component is mislabeled

  • Vue provides component slot capability, allowing developers to define undefined parts as slots when wrapping components

  • Grammar tips:

    • Use placeholders within components
    • When using components, pass labels to replace slots

  • If the outside does not give pass, want to give a default display content

    • The default content

2. Component – Named slot

  • When there are more than two places in a component that require external tags

  • Incoming labels can be dispatched to different slot locations

  • Requirements:

    • V-slot is usually used with the template tag (template is a new html5 tag content template element, is not rendered to the page, is usually parsed by vue internal tags).
      <div>
         <slot name="title"></slot>
     </div>
    
      <slot name="content"></slot>
Copy the code
<span style="color: RGB (51, 51, 51); font-size: 14px! Important; white-space: inherit! Important;" red;" </span> </template>Copy the code

V-slot can be simplified to # use

V-bind can be omitted as: v-on: can be omitted as @ v-slot: can be simplified as #

Summary: The slot name attribute is called the slot name. When using components, template is passed the specific tag along with the slot name

3. Component-scope slot

  • Use: When using the component slot technique, variables within child components are required

  • Value in a child component that is used in the parent component environment when assigning a value to a slot

  • Formula:

    • Child component that binds properties and values within the child component to slot
    • Using components, pass in custom tags, template and V-slot =” Custom variable name”
    • The scope variable name automatically binds all properties and values on slot

Scope slot

{row} deconstructs the < # template body = “{row}” > {{row. XX}} < / template >

// subcomponent <slot :row="obj"> <! {{obj. HeadImgUrl}} </slot>Copy the code
// Parent component <template v-slot="scope"> <a :href="scope.row.headImgUrl">{{scope.row.headImgUrl}}</a> </template>Copy the code