Vuejs组件之slot

 

 单个slot示例

HTML部分

 <template id="solt">
         <div>
      <h1>This is my component!</h1>
      <slot>
        This will only be displayed if there is no content
        to be distributed.
      </slot>
</div>
   </template>
   <div id="porent">
       <my-component>
           <h1>这个可以吧</h1>
       </my-component>
   </div>

Vue.component('my-component',{
            template:"#solt"
        })
        new Vue({
            el:"#porent",

        })

 

当my-component模板里面有内容时<slot>将被替换掉反之则不被替换