Vue学习计划-Vue3--核心语法(九)slot插槽

发布时间:2024年01月13日
slot
  • 插槽:简单说就是父组件内部使用了子组件,但是子组件内部某些结构需要使用者自行定义,此时就需要用到插槽实现

    1. 默认插槽

    默认插槽的namedefault

    • 父组件
      <template>
        <div>
          <Child>
            <h3>默认插槽</h3>
          </Child>
        </div>
      </template>
    
    • 子组件
    <template>
      <div>
        <!-- 默认插槽 -->
        <!-- <slot name="default"></slot> -->
        <slot></slot>
      </div>
    </template>
    
    1. 具名插槽
    1. 在插槽上加上name,可以实现多个结构匹配
    2. v-slot必须要加在组件标签或者template标签上
    • 父组件
      <template>
        <div>
          <Child>
            <!-- 可以简写成 <template #c1> -->
            <template v-slot: c1>
              <h3>插槽c1</h3>
            </template>
            <template v-slot: c2>
              <h3>插槽c1</h3>
            </template>
          </Child>
        </div>
      </template>
    
    • 子组件
    <template>
      <div>
        <!-- 具名插槽 -->
        <slot name="c1"></slot>
        <slot name="c2"></slot>
      </div>
    </template>
    
    1. 作用域插槽

    理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(新闻数据在News组件中,但使用数据所遍历出来的结构由App组件决定)

    具体编码:

    • 父组件:
      <template>
        <div class="father">
          <h3>父组件</h3>
          <div class="content">
            <!-- <Hobbies v-slot="params"> -->
            <Hobbies #default="params">
                <ul>
                  <li v-for="y in params.hobbies" :key="y.id">
                    {{ y.name }}
                  </li>
                </ul>
            </Hobbies>
            <Hobbies>
              <!-- 加在标签上会报错, Game组件上是允许的 -->
              <!-- <h3 #footer>sasdas</h3> -->
              <Game #footer></Game>
            </Hobbies>
    
          </div>
        </div>
      </template>
    
      <script setup lang="ts" name="Father">
      import Game from './Game.vue';
      import Hobbies from './Hobbies.vue'
      </script>
    
    • 子组件:<Hobbies>
    <template>
      <div class="game">
        <h2>爱好</h2>
        <slot :youxi="hobbies" haha="哈哈" hehe="呵呵"></slot>
      </div>
    </template>
    
    <script setup lang="ts" name="Game">
      import {reactive} from 'vue'
      let hobbies = reactive([
        {id:'01',name:'读书'},
        {id:'02',name:'唱歌'},
        {id:'03',name:'跳舞'},
      ])
    </script>
    
文章来源:https://blog.csdn.net/qq_35940731/article/details/135575345
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。