Vue 入门之浅谈插槽slot(一)插槽的简单使用

@[TOC](Vue 入门之浅谈插槽slot(一)插槽的简单使用)

插槽是什么

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。
https://cn.vuejs.org/v2/guide/components-slots.html

如何使用插槽

• 创建Vue/Cli项目

• vue creat slot
  

• 根据项目需求配置所需插件

• 清空App.vue文件,删除HelloWorld.vue

• 新建Temp.vue

• 

• 在Temp.vue写一个简单的vue模板

  <template>
      <div id="temp">
         {{msg}}
      </div>
  </template>
  
  <script>
  export default {
  	props:["msg"],
      data(){
          return {
              
          }
      }
  }
  </script>
  
  <style>
      #temp{
          border: 1px solid #ccc;
          width: 80%;
          height: 40px;
          margin-top: 20px;
      }
  </style>
  
  

• 在App.vue中引入Temp并作为子组件使用

  <template>
    <div id="app">
      <app-temp :msg="msg" />
    </div>
  </template>
  
  <script>
  import Temp from "./components/Temp"
  export default {
    name: 'app',
    components: {
      "app-temp":Temp
    },
    data(){
          return {
              msg:"hello app"
          }
      }
  }
  </script>
  
  <style>
      #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
  
      }
      #app span{
          color: aqua;
      }
  </style>
  
  

• 此时只是简单的父组件向子组件传值跟slot并无关系，页面显示如下
  
  

• 如果我们向向子组件传递HTML代码的话props是无法实现的就需要用到slot

• 将页面结构做一下修改

• App.vue

  <template>
    <div id="app">
      <app-temp>
          <span>{{msg}}</span>
      </app-temp>
    </div>
  </template>
  
  <script>
  import Temp from "./components/Temp"
  export default {
    name: 'app',
    components: {
      "app-temp":Temp
    },
    data(){
          return {
              msg:"hello app"
          }
      }
  }
  </script>
  
  <style>
      #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
  
      }
      /* #app span{
          color: aqua;
      } */
  </style>
  
  

• Temp.vue

<template>
    <div id="temp">
        <slot></slot>
    </div>
</template>

<script>
export default {
    data(){
        return {
        }
    }
}
</script>

<style>
    #temp{
        border: 1px solid #ccc;
        width: 80%;
        height: 40px;
        margin-top: 20px;
    }
</style>

• 此时页面显示如下
  
  此时hello app并不是直接显示在#temp下而是将嵌套在span标签内