Vue3 - slot usage

slot

scenes to be used

• Pass some template fragments to the child components, and let the child components render the passed fragments in their components

Classification

• Slots are divided into default slots, named slots, dynamic slots, and scoped slots

default slot

• Subcomponents are exported by setting a slot

• The parent component introduces the child component, just write the template fragment to be inserted in the middle of the tag

• If no template judgment is passed, the default content of the slot label package will be displayed, and the component label can be represented by a single label; the default content of the slot package will be replaced when the template is passed in for judgment

• The example is as follows

• <!-- 父组件 -->
  <template>
    <div>
      <!-- 不传判断时 -->
      <Component3 />
        
      <!-- 传入模板片段 -->
      <Component3>
        <h3>我是默认插槽</h3>
      </Component3>
      
       <!-- 插槽作用域 -->
       <!-- 插槽内容可以访问到父组件的数据作用域，因为它就是在当前父作用域定义的，它无法访问子组件的数据 -->
      <Component3>
        <h3>{
       
       { name }}</h3>
      </Component3>
    </div>
  </template>
   
  <script setup>
  import Component3 from './components/zujianup/ComponentTwo.vue'
  </script>
  
  
  <!-- 子组件 -->
  <template>
    <div>
       <div>
          <h2>头部</h2>
          <slot>
            <!-- 默认内容，传入模板会覆盖该默认内容 -->
            不传任何值时显示我
          </slot>
       </div>
    </div>
  </template>
  

named slot

• Sometimes a component contains multiple socket outlets. In order to distinguish them, we can use named slots, which can select the insertion position by name

• The slot tag uses name to name the slot name, and the parent component passes v-slot: or # to follow the slot name when passing in content

• <!-- 父组件 -->
  <template>
    <div>
      <Component3>
        <template v-slot:main>
          具名插槽--主体
        </template>
        <template #bottom>
          具名插槽--底部
        </template>
      </Component3>
    </div>
  </template>
   
  <script setup>
  import Component3 from './components/zujianup/ComponentTwo.vue'
  </script>
  
  <!-- 子组件 -->
  <template>
    <div>
       <div>
          <h2>头部</h2>
          <slot>
            <!--  -->
            不传任何值时显示我
          </slot>
       </div>
       <div>
          <h2>主体</h2>
          <!-- 名为main的slot -->
          <slot name="main"></slot>
       </div>
       <div>
          <h2>底部</h2>
           <!-- 名为bottom的slot -->
          <slot name="bottom"></slot>
       </div>
    </div>
  </template>
  

dynamic slot

• Compared with named slots, it is different in that its slot name is dynamic

• <template>
    <div>
      <Component3>
        <!-- extraSlot的值来源于script定义的值 -->
        <template #[extraSlot]>
          动态插槽
        </template>
      </Component3>
    </div>
  </template>
   
  <script setup>
  import { ref } from 'vue'
  import Component3 from './components/zujianup/ComponentTwo.vue'
  const extraSlot = ref('extra') // 动态插槽名
  
  </script>
  

Scoped slots

• Because the content of the slot is defined in the parent component, the data of the child component cannot be accessed, and the scope slot can pass values. Yes, the parent component can get the data and use it

• <!-- 父组件 -->
  <template>
    <div>
      <Component3>
        <!-- 插槽名为finally 用slotProps接收子组件传的值 -->
        <template v-slot:finally="slotProps">
          {
       
       { slotProps.text }} {
       
       { slotProps.count }} {
       
       { slotProps }}
        </template>
      </Component3>
    </div>
  </template>
  
  <!-- 子组件 -->
  <template>
    <div>
       <slot name="finally" :text="greetingMessage" :count="1" :obj="obj"></slot>
    </div>
  </template>
   
  <script setup>
      import { ref } from "vue";
  
      const obj = ref({
        name: '张三',
        age: 18
      })
  </script>