slot插槽（又叫内容分发）_slot name='a-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_61977924/article/details/120486878

意义：

扩展组件能力，提高组件的复用性

单个插槽 <slot></slot>

具名插槽 <slot name="a"></slot>

旧版slot：

<body>
  <div id="box">
    <!-- 当前组件或者节点 在哪个模板中，就能访问哪个模板状态 -->
    <child>
       <div slot="a">11111111111111</div>
  
       <div>44444444444444</div>
    </child>
  </div>

  <script>
   
    // 单个插槽， <slot></slot>
    // 具名插槽  <slot name="a"></slot>
    Vue.component("child",{
      template:`
        <div>
          child
          <slot name="a"></slot>
     
          <slot></slot>
        </div>
      `
    })
    new Vue({
      el:"#box"
    })
 </script>
</body>

新版slot：

v-slot只能添加在<template>上

<body>
  <div id="box">
    <!-- 当前组件或者节点 在哪个模板中，就能访问哪个模板状态 -->
    <child>
        <template v-slot:a>
            <div>1111111111</div>
        </template>

       <template #b>
        2222222222222222222
       </template>

    </child>

  </div>

  <script>
    
    Vue.component("child",{
      template:`
        <div>
          child
          <slot name="a"></slot>
      `
    })
    new Vue({
      el:"#box"
    })
  </script>
</body>

插槽版抽屉：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">

<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
    <div id="box">
        <navbar >
          <button @click="isShow=!isShow">click</button> 
        </navbar>
        <sidebar v-show="isShow"></sidebar>  
    </div>
    <script>

        Vue.component("navbar",{
          
          template:`
            <div style="background:yellow">
              nabbar- <slot></slot>
            </div>
          `,
         
        })

        Vue.component("sidebar",{
          template:`
            <ul style="background-color: yellow;width: 200px;height: 500px;" >
              <li>首页</li>
              <li>钱包</li>
              <li>设置</li>
            </ul>
          `
        })

        new Vue({
          el:"#box",
          data:{
            isShow:false
          }
        })
    </script>
</body>
</html>