Vue slot

  1. What it does: Allows a parent component to insert content (HTML structure or other component) into a child component at a specified location, which is also a way of communicating between components

  2. Categories: Default slot, named slot, scoped slot

  3. The parent component writes the child component in double label form, writes the content in the double label inside, after the child component defines the slot will insert the content to the child component’s specified position (the location), as for the style, writes in the parent component or the child component can either

    • The style is written in the parent component: the parsed structure is inserted into the slot with the style
    • Styles are written in child components: after parsing, only structures are inserted into slots, and styles are controlled in child components

  4. Usage:

    1. Default slot:

    Parent component: <Child> <! </div> </Child> <template> <div> <! <slot></slot> specifies the default contents of the slot when the parent component does not pass the structure. </slot> </div> </template>Copy the code

    2. Named slot :(parent component data to child component)

    Parent component: <Child> <! <template slot-scope="center"> <! }}</div> </template> <! --> <template v-slot:footer> <! }}</div> </template> <! --v-slot short: # slot name template structure is placed in the child component where <slot> name attribute is main --> <template #main> <! }}</div> </template> </Child> <template> <div> <! <slot name="center"> Slot default... </slot> <slot name="footer"> </slot> <slot name="main"> </slot> </div> </template>Copy the code

    3. Scope slot :(child component data to parent component)

    1. Understanding: The data is in the child component itself, but depending on the structure of the data generation needs to be determined by the user of the component. (The games data is in the Child component, but the structure traversed using the data is determined by the App component.

    2. Grammar:

      Note: Slot-scope is an old API (not recommended), v-slot is the latest

      Parent component: <! <Child> <template slot-scope="scope"> <! -- slot-scope="{games} "--> <! - list is generated by ul - > < ul > < li v - for = "g scope. In games" : the key = "g" > {{g}} < / li > < / ul > < / template > < / Child > <! <Child> <template v-slot="scope"> <! Written - or v - slot = "{8}" deconstruction forms can also be - > < h4 v - for = "g scope. In games" : the key = "g" > {{g}} < / h4 > < / template > Child > < / sub components:  <template> <div> <slot :games="games"></slot> <! -- Can pass multiple values, </div> </template> <script> export default {name:'Child', / data/data in the component itself () {return {games: [' red alert ', 'pass through the fire,' s', 'super Mario']}},} < / script >Copy the code

4. Name slot and scope slot are used together:

<! Name is the name of the slot --> <slot :obj="{a,b}" name="child"> What is displayed by default </slot> <! --> <child> <template V-slot :child="scope"> <! If v-slot='scope', the page will not display data. <h2>{{ scope.obj }}</h2> </template> </child> ```Copy the code