Vue组件(插槽)

1、插槽属于Vue组件的三个核心之一，其余两个分别是属性和事件，今天主要学习插槽的使用。

2、插槽(slot)：将子组件和父组件进行组合，可以弥补视图的不足。是组件具有更好的拓展性

组件的封装方式：抽取共性

3、插槽的使用方式：

（1）vue2.0之前的版本

        1️⃣匿名插槽(默认插槽)：一个组件中有且只有一个插槽

<div>
    <h2>子组件</h2>
    <p>哈哈哈</p>
    <!-- 匿名插槽：预留的位置，具体做什么元素由该组件的使用者决定-->
    <slot></slot>    
</div>

        2️⃣具名插槽：

        Son.vue

<div>
    <slot name="top"></slot>
    <h2>子组件</h2>
    <p>哈哈哈</p>
    <slot name="center"></slot>
    <p>啦啦啦</p>
    <slot name="bottom"></slot>
</div>

App.vue：

<Son>
      <template v-slot:top>
        <h1>插槽</h1>
      </template>
      <template v-slot:center>
        <button>按钮</button>
      </template>
      <template v-slot:bottom>
        <select>
          <option value="#">请选择</option>
        </select>
      </template>
</Son>

        3️⃣作用域插槽：父组件显示不同的页面结构，页面中的数据来自子组件

        Menu.vue：

<template>
  <div>
    <h2>哈哈哈</h2>
    <p>啦啦啦</p>
    <slot :lang="list"></slot>
  </div>
</template>

<script>
export default {
  name: "Menu",
  data(){
    return {
      list:['JavaScript','CSS','HTML','C++','C']
    }
  }
}
</script>

        App.vue

<Menu>
	<template slot-scope="slotProps">
        {{ slotProps.lang.join('、')}}
	</template>
</Menu>

（2）vue2.6之后的版本：插槽使用统一的新的语法(<v-slot>指令)，用来取代<slot>和slot-scope

        1️⃣匿名插槽（默认插槽）：在父组件中使用v-slot指令

        Son.vue：

<div>
    <h2>子组件</h2>
    <p>哈哈哈</p>
    <p>啦啦啦</p>
    <slot></slot>
  </div>

        App.vue：

<Son>
      <template v-slot:default>
        <button>测试</button>
      </template>
</Son>

        2️⃣具名插槽：和老版本用法相同

        3️⃣作用域插槽：

        Menu.vue

<div>
    <h2>哈哈哈</h2>
    <p>啦啦啦</p>
    <slot :lang="list" name="st1"></slot>
    <slot :lang="list" name="st2"></slot>
  </div>
</template>

<script>
export default {
  name: "Menu",
  data(){
    return {
      list:['JavaScript','CSS','HTML','C++','C']
    }
  }
}
</script>

        App.vue

 <Menu>
      <template v-slot:st1="slotProps">
        <h2>{{ slotProps.lang.join(' --- ')}}</h2>
      </template>
    </Menu>

<!--    列表方式-->
    <Menu>
      <template v-slot:st2="slotProps">
        <ul>
          <li v-for="(item,index) in slotProps.lang" :key="index">{{ item }}</li>
        </ul>
      </template>
    </Menu>
  </div>