Vue中插槽的简单使用

插槽

• 分类：默认插槽、具名插槽、作用域插槽

• 默认插槽：让父组件可以向子组件指定位置插入html结构，也是一种组件通信的方式，适用于父组件（App）===>子组件(MyFooter)

• 默认插槽的App组件

• <template>
    <div class="container">
      <!-- 普通写法 -->
      <!-- title、listDate的位置为标签属性。 -->
      <MyFooter title="游戏" :listDate="games"/>
  ​
      <!-- 下面都是默认插槽的书写形式-->
      <!-- Vue会将img标签的内容解析后在传给MyFooter组件中的slot插槽中。故将普通写法:listDate="foods"删除掉 -->
      <!-- 标签体的位置为：<MyFooter>标签体</MyFooter>   -->
      <MyFooter title="美食" >
        <img src="图片地址" alt="">
      </MyFooter>
  ​
      <MyFooter title="游戏" >
         <ul>
              <li v-for="(item,index) in games" :key="index" >{{ item }}</li>
          </ul>
      </MyFooter>
  ​
      <MyFooter title="电影" >
        <!-- controls让视频可以通过点击控制播放 -->
           <video controls src="视频地址"></video>
      </MyFooter>
        
      <router-view />
    </div>
  </template>
  <script>
  import MyFooter from './components/MyFooter.vue';
  export default {
    name: 'App',
    components: { MyFooter },
    data() {
      return {
        foods: ['火锅', '薯条', '汉堡'],
        games: ['只狼', '大表哥', '黑神话悟空'],
        files: ['《深海》', '《战狼》', '《流浪地球》']
      }
    }
  }
  </script>
  <style lang="less" scoped>
  .container {
    display: flex;
    justify-content: space-around
  }
  img {
    width: 100%;
  }
  video {
    width: 100%;
  }
  </style>
  ​

• 默认插槽的MyFooter组件

• <template>
      <div class="category">
          <h3>{{ title }}分类</h3>
          <!-- 普通写法 -->
          <!-- 普通写法通过props将listDate传过来进行展示 -->
          <ul>
               <li  v-for="(item,index) in listDate" :key="index" >{{ item }}</li>   
          </ul>
          <!-- 插槽写法 -->
          <!-- <slot></slot>为默认插槽,挖个坑等使用的组件填充坑的内容 -->
          <slot>如果图片或视频未展示,展示此处的文字</slot>
         
      </div>
  </template>
  ​
  <script>
  export default {
      name: 'MyFooter',
      //这里保留应该只保留title，listDate仅是普通写法需求
      props: ['title','listDate'],
  }
  </script>
  <style scoped lang="css">
      .category {
          background-color: skyblue;
          width: 200px;
          height: 300px;
      }
      h3 {
          text-align: center;
      }
  </style>
  ​

• 具名插槽的App

• 具名插槽的给MyFooter的slot标上名字name="xxx"，在App组件中使用那个插槽则slot="xxx"。进行相互匹配

• <template>
    <div class="container">
  ​
      <!-- 有名插槽 -->
      <!-- title的位置为标签属性。-->
      <MyFooter title="美食" >
        <!-- 给img、a匹配相应的插槽名字,对应相应组件中的插槽 -->
        <img slot="center" src="图片地址" alt="">
        <a slot="footer" href="网址地址">美食地址</a>
        <a slot="footer" href="网址地址">电影地址</a>
      </MyFooter>
  ​
      <MyFooter title="游戏" >
         <ul slot="center">
              <li  v-for="(item,index) in games" :key="index" >{{ item }}</li>
         </ul>
         <div slot="footer">
            <a slot="footer" href="网址地址">热门推荐</a>
            <a slot="footer" href="网址地址">网络共享</a>
         </div>
         
      </MyFooter>
  ​
      <MyFooter title="电影" >
        <!-- controls让视频可以通过点击控制播放 -->
           <video slot="center" controls src="视频地址"></video>\
           <!-- template让下列的代码少了一层div 同时可以将slot="footer"去掉,改成在template标签属性的位置使用 v-slot:footer -->
           <template>
              <div slot="footer">
                  <a slot="footer" href="网址地址">动漫</a>
                  <a slot="footer" href="网址地址">生活</a>
              </div>
              <a slot="footer" href="网址地址">动画片</a>
           </template>
      </MyFooter>
      <router-view />
    </div>
  </template>
  <script>
  import MyFooter from './components/MyFooter.vue';
  export default {
    name: 'App',
    components: { MyFooter },
    data() {
      return {
        foods: ['火锅', '薯条', '汉堡'],
        games: ['只狼', '大表哥', '黑神话悟空'],
        files: ['《深海》', '《战狼》', '《流浪地球》']
      }
    }
  }
  </script>
  <style lang="less" scoped>
  .container {
    display: flex;
    justify-content: space-around
  }
  img {
    width: 100%;
  }
  video {
    width: 100%;
  }
  </style>

• 具名插槽的MyFooter

• <template>
      <div class="category">
          <h3>{{ title }}分类</h3>
      
          <!-- <slot name=""></slot>为具名插槽,挖个坑等使用的组件填充坑的内容 -->
          <slot name="center">如果图片或视频未展示,展示此处的文字</slot>
          <slot name="footer">如果图片或视频未展示,展示此处的文字</slot>
         
      </div>
  </template>
  ​
  <script>
  export default {
      name: 'MyFooter',
      props: ['title'],
  }
  </script>
  ​
  <style scoped lang="css">
      .category {
          background-color: skyblue;
          width: 200px;
          height: 300px;
      }
      h3 {
          text-align: center;
      }
  </style>

• 作用域插槽理解：

  1、和上面两种插槽不同，作用域插槽数据（games) 在组件（MyFooter）但数据的结构需要组件的使用者（App）来决定

  2、在MyFooter通过slot传给App,App组件通过scope进行接收。

• App组件（vm）的管家。App不仅是组件，也管理所有的组件

• <template>
    <div class="container">
  ​
      <MyFooter title="游戏" >
        <!-- 要想接收MyFooter传过来的games需要写成template形式通过scope来接收传过来的值,注意这里不是scoped而是scope。 -->
        <template scope="boy">
            <ul >
              <!-- 通过{{ games }}可以知道,只有boy.games才可以拿到数组,games是MyFooter传过来的数组是不可以修改的。 -->
                <li  v-for="(item, index) in boy.games" :key="index" >{{ item }}</li>
           </ul>
        </template>
      </MyFooter>
  ​
      <MyFooter title="游戏" >
        <!-- 可以将scope="xxx"改成slot-scope="xxx"。slot-scope="xxx"是新的书写方式 -->
        <template scope="boy">
            <ol >
                <li  v-for="(item, index) in boy.games" :key="index" >{{ item }}</li>
           </ol>
        </template>
      </MyFooter>
  ​
      <MyFooter title="游戏" >
        <!-- 用ES6的形式写成{games},遍历的时候可以直接写games -->
        <template scope="{games}">
                <h4  v-for="(item, index) in games" :key="index" >{{ item }}</h4>
        </template>
        
      </MyFooter>
  ​
      <router-view />
    </div>
  </template>
  <script>
  import MyFooter from './components/MyFooter.vue';
  export default {
    name: 'App',
    components: { MyFooter }
  }
  </script>
  <style lang="less" scoped>
  .container {
    display: flex;
    justify-content: space-around
  }
  img {
    width: 100%;
  }
  video {
    width: 100%;
  }
  </style>
  ​

• 作用域插槽的MyFooter组件

• <template>
      <div class="category">
          <h3>{{ title }}分类</h3>
          <!-- :games="games"的意思是谁往插槽放数据games就传给谁 -->
         <slot :games="games"></slot>
      </div>
  </template>
  ​
  <script>
  export default {
      name: 'MyFooter',
      props: ['title','listDate'],
      data(){
          return {
              games: ['只狼', '大表哥', '黑神话悟空'],
          }
      },   
  }
  </script>
  ​
  <style scoped lang="css">
      .category {
          background-color: skyblue;
          width: 200px;
          height: 300px;
      }
      h3 {
          text-align: center;
      }
  </style>

  ​