Vue-slot(插槽)

发布于 2020-03-01  314 次阅读

slot

<!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">
      <hello>
        <ul slot="a">
          <li>111</li>
          <li>111</li>
          <li>111</li>
          <li>111</li>
        </ul>
        <ul slot="b">
          <li>222</li>
          <li>222</li>
          <li>222</li>
          <li>222</li>
        </ul>

        <ul >
          <li>333</li>
          <li>333</li>
          <li>333</li>
          <li>333</li>
        </ul>
      </hello>
<!--  <swiper>
            
      </swiper> -->
    </div>
   

    <script type="text/javascript">
    
      var hello = {
            template:`<div>
                <slot name="b"></slot>
                hello
                <slot name="a"></slot>

                <slot></slot>
            </div>`
      }


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

 

slot-example

<!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">show/hide</button>
        </navbar>
        <sidebar v-show="isShow"></sidebar>

        <swipe>
          <li>444444</li>
          <li>555555</li>
          <li>666666</li>
        </swipe>
    </div>
   
   

    <script type="text/javascript">
        //子组件
       Vue.component("navbar",{
        template:`<div>

          navbar--<slot></slot>
        </div>`
       })


       Vue.component("sidebar",{
        template:`<div>

          sidebar
          <ul>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
          </ul>
        </div>`
       })


       Vue.component("swipe",{
        template:`<div>
          <ul>
              <slot></slot>
          </ul>

        </div>`
        

       })
       
        var vm = new Vue({
          el:"#box",
          data:{
            isShow:false
          }
        })
      

    </script>
</body>
</html>

 

 

 

slot插槽
    a. 单个slot
    b. 具名slot
        *混合父组件的内容与子组件自己的模板-->内容分发
        *父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

 

注错之当