slot的用法

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

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

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>
                <!-- 将 `scope` 定义为插槽作用域的名字 -->
                <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>