Vue创建插槽

匿名插槽和命名插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>component</title>
    <script type="text/javascript" src='js/vue.js'></script>
    <script>
    window.onload = function(){
        new Vue({
            el:'#my',
            data:{ 
                arr:[1,2,3,4],
                flag:'a'
            },
            components:{  // 局部组件
              'my-a':{  //组件的名称
                template:'#my-a',
                data(){
                  return {
                    title:'A组件'
                  }
                }
              }
            }
        })
    }
    </script>
    <template id="my-a">
      <div>
        <h1>{{title}}</h1>
        <slot></slot>
        <slot name="n1"></slot>
      </div>
  </template>
</head> 
<body>
  <div id="my">
      <my-a>
            <!-- 匿名插槽 -->
          <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
          </ul>
          <!-- 命令插槽 -->
          <div slot='n1'>
              <p>123456</p>
          </div>
      </my-a>
  </div>
</body>
</html>

 B

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>component</title>
    <script type="text/javascript" src='js/vue.js'></script>
    <script>
    window.onload = function(){
        new Vue({
            el:'#my',
            data:{ 
                arr:[1,2,3,4],
                flag:'a'
            },
            components:{  // 局部组件
              'my-a':{  //组件的名称
                template:'#my-a',
                data(){
                  return {
                    title:'A组件',
                    arr:[1,2,4,4,6]
                  }
                }
              }
            }
        })
    }
    </script>
    <template id="my-a">
      <div>
        <h1>{{title}}</h1>
        <slot :data="arr" :title="title"></slot>
      </div>
  </template>
</head> 
<body>
  <div id="my">
      <my-a>
          <h2 slot-scope="xyz">{{xyz.title}}</h2>
          <ul slot-scope="abc">
              <li v-for="v in abc.data">{{v}}</li>
          </ul>
      </my-a>
  </div>
</body>
</html>

 

posted @ 2020-03-04 11:34  bradleydan  阅读(196)  评论(0)    收藏  举报