slot的用法

傷城~ 2022-03-27 06:44 181阅读 0赞

1.插槽渲染

父组件种引用子组件，标签内写入的内容将被分发到子组件的slot标签中

父组件：

<strong>1.插槽渲染</strong>        
    <div>
       <slot-view>窗外的麻雀，在电线杆上多嘴</slot-view>
    </div>

子组件SlotView.vue：

<template>
      <div>
        <slot></slot>
      </div>
    </template>
    <script>
    export default {};
    </script>

2.具名插槽

父组件种若使子组件指定的插槽显示对应的内容，可以在父组件引入的子组件种使用slot属性指定子组件要显示的内容，子组件插槽使用name属性，值与父组件slot属性值对应，父组件未指定slot的内容将显示在子组件未指定name的插槽中。

父组件

<strong>2.具名插槽</strong>
            <div>
                <slot-view2>
                <template slot="header">
                    <strong>Here is header</strong>
                </template>
                <p>A paragraph for the main content.</p>
                <p>And another one.</p>
                <template slot="footer">
                    <strong>Here's footer</strong>
                </template>
                </slot-view2>
            </div>

子组件SlotView2.vue

<template>
      <div>
        <header>
          <slot name="header"></slot>
        </header>
        <main>
          <slot></slot>
        </main>
        <footer>
          <slot name="footer"></slot>
        </footer>
      </div>
    </template>
    <script>
    export default {};
    </script>

3.将slot使用在普通元素上

使用具名插槽，父组件中除了在template中使用slot属性外，还可以直接在html标签中使用，直接渲染成对应标签

父组件：

<strong>3.将slot使用在普通元素上</strong>
            <div>
              <slot-view3>
                <h1 slot="header">Here might be a page title</h1>
    
                <p>A paragraph for the main content.</p>
                <p>And another one.</p>
    
                <p slot="footer">Here's some contact info</p>
              </slot-view3>
            </div>

子组件SlotView3.vue

4.插槽设置默认内容

在子组件的slot标签中设置内容可以作为默认内容，若父组件插槽传入则使用传入的内容

父组件

<strong>4.插槽设置默认内容</strong>
            <div>
                <code>显示默认内容：</code>
              <slot-view4></slot-view4>
              <code>显示覆盖内容：</code>
              <slot-view4>
                提交
              </slot-view4>
            </div>

子组件SlotView4.vue

<template>
      <div>
        <button type="submit">
          <slot>Submit</slot>
        </button>
      </div>
    </template>
    <script>
    export default {};
    </script>

5.作用域插槽

子组件中的数据需要循环遍历在插槽中，可以使用作用域插槽，在父组件中引入子组件作用域

父组件

<strong>5.作用域插槽</strong>
              <div>
                  <slot-view5>
                    
                    <template slot-scope="scope">
                        {
       { scope.todo.text }}
                    </template>
                  </slot-view5>
              </div>

子组件SlotView5.vue

<template>
      <div>
        <ol>
          <li v-for="todo in todos" :key="todo.id">
            <slot :todo="todo">{
       { todo.text }}</slot>
          </li>
        </ol>
      </div>
    </template>
    <script>
    export default {
        data(){
          return {
              todos:[
                  {
                      id:1,
                      text:"first",
                  },
                  {
                      id:2,
                      text:"second",
                  }
              ]
          }
      }
    };
    </script>