0
点赞
收藏
分享

微信扫一扫

弟12章 1 网络编程

忍禁 2024-01-14 阅读 9
slot
  • 插槽:简单说就是父组件内部使用了子组件,但是子组件内部某些结构需要使用者自行定义,此时就需要用到插槽实现

    1. 默认插槽
    • 父组件
      <template>
        <div>
          <Child>
            <h3>默认插槽</h3>
          </Child>
        </div>
      </template>
    
    • 子组件
    <template>
      <div>
        <!-- 默认插槽 -->
        <!-- <slot name="default"></slot> -->
        <slot></slot>
      </div>
    </template>
    
    1. 具名插槽
    • 父组件
      <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. 作用域插槽

    具体编码:

    • 父组件:
      <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>
    
举报

相关推荐

0 条评论