黑马程序员技术交流社区

标题: 【郑州校区】前端笔记Vue项目day3(四） [打印本页]

---

作者: 谷粒姐姐    时间: 2019-8-29 15:33
标题: 【郑州校区】前端笔记Vue项目day3(四）
组件插槽

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

匿名插槽

[AppleScript] 纯文本查看 复制代码

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

具名插槽

• 具有名字的插槽
• 使用 <slot> 中的 "name" 属性绑定元素
• [AppleScript] 纯文本查看 复制代码

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

  
  

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2