【郑州校区】前端笔记Vue项目 第3天 4

组件插槽

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

  
  

匿名插槽

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

【郑州校区】前端笔记Vue项目 第3天 4

组件插槽

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

  
  

匿名插槽

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