前端笔记Vue项目day3(四）

组件插槽

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

匿名插槽[mw_shl_code=applescript,true]<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>
[/mw_shl_code]
具名插槽

• 具有名字的插槽

• 使用 <slot> 中的 "name" 属性绑定元素

• [mw_shl_code=applescript,true]<div id="app">
      <base-layout>
         <!-- 2、 通过slot属性来指定, 这个slot的值必须和下面slot组件得name值对应上
                                  如果没有匹配到 则放到匿名的插槽中   --> 
        <p slot='header'>标题信息</p>
        <p>主要内容1</p>
        <p>主要内容2</p>
        <p slot='footer'>底部信息信息</p>
      </base-layout>
  
      <base-layout>
        <!-- 注意点：template临时的包裹标签最终不会渲染到页面上     -->  
        <template slot='header'>
          <p>标题信息1</p>
          <p>标题信息2</p>
        </template>
        <p>主要内容1</p>
        <p>主要内容2</p>
        <template 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>
  [/mw_shl_code]