组件插槽javascript

• 组件的最大特性就是复用性，而用好插槽能大大提升组件的可复用能力

匿名插槽

<div id="app">
        <!-- 这里的全部组件标签中嵌套的内容会替换掉slot  若是不传值 则使用 slot 中的默认值  -->  
        <alert-box>有bug发生</alert-box>
        <alert-box>有一个警告</alert-box>
        <alert-box></alert-box>
      </div>
    
      <script type="text/javascript">
        /* 组件插槽：父组件向子组件传递内容 */
        Vue.component('alert-box', {
          template: `
            <div>
              <strong>ERROR:</strong>
    		<!--  当组件渲染的时候，这个 <slot> 元素将会被替换为“组件标签中嵌套的内容”。插槽内能够包含任何模板代码，包括 HTML -->  
              <slot>默认内容</slot>
            </div>
          `
        });
        var vm = new Vue({
          el: '#app',
          data: {
            
          }
        });
      </script>
    </body>
    </html>

具名插槽

• 具备名字的插槽
• 使用 中的 “name” 属性绑定元素
• 在模板中用<slot></slot>标签订义，用name属性命名。在使用时，用<template></template>标签进行包裹，标签内部为想插入的内容，用v-slot：name的属性值或#name的属性值与具体的插槽对应

<div id="app">
        <base-layout>
           <!-- 2、 经过slot属性来指定, 这个slot的值必须和下面slot组件得name值对应上
    				若是没有匹配到 则放到匿名的插槽中   -->
    	<template #header> 
          <p>标题信息</p>
         </template>
          <p>主要内容1</p>
          <p>主要内容2</p>
          <template  v-slot:footer> 
          <p >底部信息信息</p>
          </template>
        </base-layout>
    
        <base-layout>
          <!-- 注意点：template临时的包裹标签最终不会渲染到页面上     -->  
          <template #header> 
            <p>标题信息1</p>
            <p>标题信息2</p>
          </template>
          <p>主要内容1</p>
          <p>主要内容2</p>
           <template  v-slot:footer> 
            <p>底部信息信息1</p>
            <p>底部信息信息2</p>
          </template>
        </base-layout>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
        /* 具名插槽 */
        Vue.component('base-layout', {
          template: `
            <div>
              <header>
    			 <!--	1、 使用 <slot> 中的 "name" 属性绑定元素 指定当前插槽的名字--> 
                <slot name='header'></slot>
              </header>
              <main>
                <slot></slot>
              </main>
              <footer>
    			 <!--	注意点： 
    			具名插槽的渲染顺序，彻底取决于模板，而不是取决于父组件中元素的顺序--> 
                <slot name='footer'></slot>
              </footer>
            </div>
          `
        });
        var vm = new Vue({
          el: '#app',
          data: {
            
          }
        });
      </script>
    </body>
    </html>