Vue插槽

插槽

一、默认插槽

• 定义插槽 在DefultSlot.vue组件设置默认插槽

  <template>
    <div>
      <!-- 默认插槽 -->
      <slot>我是没使用的时候的默认结构</slot>
    </div>
  </template>
  

• 导入插槽

  // 导入组件
  import DefultSlot from './components/DefultSlot.vue'
   //注册插槽
  components: {
     DefultSlot,
  },
  

• 使用插槽

  <template>
    <div id="app">
      <DefultSlot>
          <div>我是默认插槽</div>
      </DefultSlot>
    </div>
  </template>
  

二、具名插槽

数据不定义在插槽端，可以按名子插入对对应插槽

• 定义插槽 在NameSlot.vue组件设置具名插槽

  <template>
    <div>
      <!-- 默认插槽 -->
      <slot>我是没使用的时候的默认结构</slot>
    </div>
  </template>
  

• 导入插槽

  // 导入组件
  import ScopeSlot from './components/ScopeSlot.vue'
   //注册插槽
  components: {
     ScopeSlot,
  },
  

• 使用插槽

  <template>
    <div id="app">
      <!-- 使用具名插槽 -->
      <NameSlot>
        <div slot="bloom">我是插入具名插槽的元素</div>
      </NameSlot>
    </div>
  </template>
  

三、作用域插槽

数据定义在插槽端，为插入进来的元素提供数据

• 定义插槽 在ScopeSlot.vue组件种

  <template>
    <div>
      <!-- 作用域插槽 -->
      <slot :datas="datas"></slot>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        datas: [{ id: 1 }, { id: 2 }],
      }
    },
  }
  </script>
  

• 导入插槽

  // 导入组件
  import ScopeSlot from './components/ScopeSlot.vue'
   //注册插槽
  components: {
     ScopeSlot,
  },
  

• 使用插槽

  <template>  <div id="app">     <!-- 使用作用域插槽 -->    <ScopeSlot>      <template slot-scope="{ datas }">        <div>          <li v-for="item in datas" :key="item.id">{{ item.id }}</li>        </div>      </template>    </ScopeSlot>  </div></template>