slot是标签的内容扩展,也就是说你用slot就可以在自定义组件时传递给组件内容,组件接收内容并输出

html

父页面

<div id="app">
        <register>
                <span slot="name">{{message.name}}</span>
                <span slot="sex">{{message.sex}}</span>
                <span slot="age">{{message.age}}</span>
        </register>    
</div>

子组件


<template id="tmp">
        <div>
             <div>姓名 : <slot name="name"></slot></div>
             <div>性别 : <slot name="sex"></slot></div>
             <div>年龄 : <slot name="age"></slot></div>
        </div>
</template>    

js

var model = {
        template:`#tmp`
    }
    // 全局 写法
    // Vue.component('register',model)
       var vm = new Vue({
          el:"#app",
          data:{
            message:{
                name:"小智",
                sex:"男",
                age:24
            }
          }
          ,
          components:{
             "register":model
          }
       }) 

 一句话总结就是 子组件拿写在父组件中组件标签内的slot模板用 可以理解成组件内的html模板 

父组件

 <div class="father">
    <child>
      <div slot="up">
        <span>up</span>
        <span>up</span>
        <span>up</span>
        <span>up</span>
        <span>up</span>
        <span>up</span>
      </div>
      <div  slot="down">
        <span>down</span>
        <span>down</span>
        <span>down</span>
        <span>down</span>
        <span>down</span>
        <span>down</span>
      </div>
    </child>
  </div>

<script>
  import Child from './Child.vue'
  export default {
    data: function () {
      return {
       
      }
    },
    components:{
      'child': Child
    }
  }
</script>

子组件

 <div class="child">
    <slot name="up"></slot>
    <slot name="down"></slot>
  </div>

如果想要传值可以这样（子向父html模板）

父组件

 <div class="father">
    <child>
      <div slot-scope="user">
          <span v-for="item in user.data">{{item}}</span>
      </div>
    </child>
  </div>
<script>
  import Child from './Child.vue'
  export default {
    data: function () {
      return {
        
      }
    },
　　components:{
　　　　'Child':Child
　　}
  }
</script>

子组件

 <slot  :data="data"></slot>
<script>
  export default {
      data: function(){
        return {
          data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
        }
      }
  }
</script>

 应用场景

当你要给同事封装一个列表组件，你就需要使用作用域插槽（注意是列表或者类似列表的组件）