Vue组件插槽

组件插槽

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

匿名插槽

    <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>