Implementation understanding of vue slot slot

*In the project, there will be a situation from time to time: to display some content in the component tag, the default will not take effect, you need to add <template slot-scope= 'scope'></template> to take effect, It’s not very good to use it so muddled all the time, so I read a lot of books and practiced it recently, and finally fully understood its internal process. I hereby record it here

*I won’t talk about the vernacular, let’s go directly to the topic

   1. The slot is written in the subcomponent. Once inside the component label (subcomponent introduced in the parent component), the order of its display content is determined by the component label (subcomponent introduced in the parent component)

   2. The content displayed by the slot slot is controlled by the parent component; the slot display is not displayed and the display order is controlled by the child component

*The above is a general overview, the following is the code explanation, it may be clearer

  1. Anonymous slot

        Parent component: The parent component puts a bunch of content in the imported Children subcomponent, and the display of the content will be executed sequentially according to the order inside the subcomponent

<template>
  <div class="hello">
    <p>第一个显示的</p>
    <Children>
      <p>第三个显示的</p>
      <p>第四个显示的</p>
      <chilchildren></chilchildren>
      <p>第五个显示的</p>
    </Children>
  </div>
</template>

<script>
import Children from '@/components/children'
import chilchildren from '@/components/chilchildren'

export default {
  components: {
    Children,
    chilchildren,
  },
}
</script>

        Subcomponent: This component puts two anonymous slots, which means that the content inside the subcomponent introduced in the parent component will be displayed twice

<template>
  <div class="slotOne">
    <p>第二个显示的</p>
    <slot></slot>
    <p>第六个显示的</p>
    <!-- 注意这里又放了一个匿名插槽，意味着将在父组件里面引入的子组件内部的内容显示两次 -->
    <slot></slot>
    <p>第七个显示的</p>
  </div>
</template>

        Effect diagram: the two parts circled by the red box are the two slots defined by the subcomponent

        

2. Named slot

      Parent component: Use v-slot or # (short for v-slot) or slot (v3.0 has deprecated this wording) to correspond to a slot of the child component

<template>
  <div class="hello">
    <p>第一个显示的</p>
    <Children>
      <!-- <template v-slot:one> v-slot和#只能在template中写入-->
      <template #one>
        <p>第三个显示，因为对应子标签name为one的slot</p>
      </template>
      <p>
        特别注意：因为在子标签没有对应的匿名slot,故这下此内容和下面的子子标签就不会显示了
      </p>
      <chilchildren></chilchildren>
      <p slot="two">第五个显示,因为对应子标签name为two的slot</p>
    </Children>
  </div>
</template>

<script>
import Children from '@/components/children'
import chilchildren from '@/components/chilchildren'

export default {
  components: {
    Children,
    chilchildren,
  },
}
</script>

      Subcomponent: Use the name attribute to distinguish each slot, which is convenient for calling in the parent component

<template>
  <div>
    <p>第二个显示的</p>
    <slot name="one"></slot>
    <p>第四个显示的</p>
    <slot name="two"></slot>
  </div>
</template>

    Renderings: 

       parent component:

<template>
  <div class="hello">
    <p>第一个显示的</p>
    <Children>
      <template slot="one">
        <p>第三个显示，因为对应子标签name为one的slot</p>
      </template>
      <p>
        第五个显示的,特别注意：因为在子标签有了相对应的匿名slot,故这下此内容和下面的子子标签就显示了
      </p>
      <chilchildren></chilchildren>
      <p slot="two">第七个显示</p>
    </Children>
  </div>
</template>

<script>
import Children from '@/components/children'
import chilchildren from '@/components/chilchildren'

export default {
  components: {
    Children,
    chilchildren,
  },
}

     Subassembly:

<template>
  <div>
    <p>第二个显示的</p>
    <slot name="one"></slot>
    <p>第四个显示的</p>
    <slot></slot>
    <slot name="two"></slot>
  </div>
</template>

     Renderings:

 3. Scope slots

       At this point, it is mapped to our slot-scope="scope"

       The parent component receives the value of the child component by slot-scope. At this time, the name of the scope can be any, and it is an object by default, which will get all the data in the child component data

        parent component:

<template>
  <div class="hello">
    <Children>
    <!--  anyName默认可以随便起名字，它默认是一个对象，获取到的是Children组件中的data总数据，用它anyName.importData取出user数据 -->
      <template slot-scope="anyName">
        <p v-for="(item, index) in anyName.importData" :key="index">
          {
   
   { item }}
        </p>
      </template>
    </Children>
  </div>
</template>

<script>
import Children from '@/components/children'

export default {
  components: {
    Children,
  },
}
</script>

       Subassembly:

<template>
  <div>
    <!-- importData待会父组件就可以用它来获得到user数据 -->
    <slot :importData="user"></slot>
  </div>
</template>

<script>
export default {
  components: {},
  name: '',
  data() {
    return {
      user: [
        { name: '小小', age: 18 },
        { name: '大大', age: 18 },
        { name: '呼呼', age: 18 },
      ],
    }
  }
</script>

      Renderings:

 

Well, it's over, in a nutshell! !