Vue脚手架插槽 slot 学习

slot插槽

<slot></slot>

1. 默认插槽

引入：原本的分类组件是显示的文字，但现在某些需要换成图片 / 视频，用很多的 v-show 去控制就很麻烦

作用：直接把组件标签中的所有内容放到想要放的位置

App.vue

<template>
  <div id="app">
    <!-- 默认插槽：直接把所有东西解析到该组件里的<slot></slot>位置 -->
    <ElementTest>
        <h6>789</h6>
        <h6>hhh</h6>
    </ElementTest>
  </div>
</template>

<script>
import ElementTest from './components/ElementTest.vue'

export default {
  name: 'App',
  components: {
    ElementTest
  }
}
</script>

<style>
</style>

ElementTest.vue

<template>
    <div id="container">
        <h2>123</h2>
        <!-- 1. slot标签会将App.vue中<ElementTest>子组件标签中的内容全部放入到当前位置 -->
        <slot></slot>
        <h2>456</h2>
        <!-- 2. 子组件可以插入多个slot槽 -->
        <!-- <slot></slot> -->
    </div>
</template>

<script>
    
    export default{		
        name: 'ElementTest'
    }
</script>

<style scoped>
 #container {
    text-align: center;
 }
</style>

2. 具名插槽

引入：某个分类组件中需要显示多个分类，每个分类的内容各不相同

作用：可以分别控制组件中的想要渲染的html标签的内容，slot标签用name属性取名，<template>标签使用属性 slot = [slot标签的name名]

App.vue

<template>
  <div id="app">
    <!-- 默认插槽：直接把所有东西解析到组件里的<slot></slot>位置 -->
    <ElementTest>
      <!-- 1. 组件标签中用template标签包裹需要渲染的内容，定义属性 slot = [slot标签的name名] -->
      <template slot="first_slot">
        <h6>hhhh</h6>
      </template>
      <template slot="second_slot">
        <h6>wwww</h6>
      </template>
    </ElementTest>
  </div>
</template>

<script>
import ElementTest from './components/ElementTest.vue'

export default {
  name: 'App',
  components: {
    ElementTest
  }
}
</script>

<style>
</style>

ElementTest.vue

<template>
  <div id="app">
    <ElementTest>
      <!-- 1. 组件标签中用template标签包裹需要渲染的内容，定义属性 slot = [slot标签的name名] -->
      <template slot="first_slot">
        <h6>hhhh</h6>
      </template>
      <template slot="second_slot">
        <h6>wwww</h6>
      </template>
    </ElementTest>
  </div>
</template>

<script>
import ElementTest from './components/ElementTest.vue'

export default {
  name: 'App',
  components: {
    ElementTest
  }
}
</script>

<style>
</style>

3. 作用域插槽

引入：多个相同组件中显示的分类内容一样，但结构不同（第一个无序列表、第二个有序列表）

作用：可以给slot标签设 :自定义属性 = [要传的数据名]，从而将定义插槽的子组件的指定属性传给插槽的使用者App.vue中的定义的子组件标签对象，配合template，定义scope属性=[scope名]，通过 [scope名].[自定义属性] 在template中可以获取到传过来的参数值

App.vue

<template>
  <div id="app">
    <ElementTest>
      <!-- 1. 组件标签中用template标签包裹需要渲染的内容，定义属性 slot = [slot标签的name名] -->
      <template scope="params">
         <template v-if="params.isOrder">
            <ol>
              <li v-for="item in list" :key="item.id">{{item.name}}</li>
            </ol>
         </template>
         <template v-else>
            <ul>
              <li v-for="item in list" :key="item.id">{{item.name}}</li>
            </ul>
         </template>
      </template>
    </ElementTest>
  </div>
</template>

<script>
import ElementTest from './components/ElementTest.vue'

export default {
  name: 'App',
  components: {
    ElementTest
  },
  data() {
      return {
        list: [
          {id: '001', name: '张三',age: 18},
          {id: '002', name: '李四', age: 19}
        ]
      }
  }
}
</script>

<style>
</style>

ElementTest.vue

<template>
    <div id="container">   
        <!-- isOrder的值传递给 ElementTest 组件对象 -->
        <slot :isOrder="true"></slot>
        <slot :isOrder="false"></slot>
    </div>
</template>

<script>
    
    export default{		
        name: 'ElementTest',
    }
</script>

<style>
</style>