Slot插槽

初步了解插槽

示例

<template>
  <div>
    // 这个组件中没有任何内容，所以在插槽里面就默认用了插槽里的默认值，也就是Submit，结果图1
    <navigation-link />
    // 这个组建中有了内容，所以会替代插槽中的默认内容Submit，结果图2
    <navigation-link>
       Save
    </navigation-link>
  </div>
</template>

<script>
  import Vue from 'vue'
  
  // 下面的slot就是插槽了，如果在slot标签里写内容则是代表了插槽里的默认值，也就是Submit
  Vue.component('navigation-link', {
    template: `<button type="submit">
                    <slot>Submit</slot>
               </button>`,
  });
  export default {
    name: 'HelloWorld',
    components: [
      'navigation-link'
    ],
    data() {
      return {
      }
    },
}
</script>

结果

图1

图2

具名插槽

思考

<div class="container">
  <header>
    <!--我们想把头部放到这里-->
  </header>
  <main>
    <!--我们想把主要内容放到这里-->
  </main>
  <footer>
    <!--我们想把页脚放到这里-->
  </footer>
</div>

解决

// 如下，我们只是在slot标签内加了个name="..."，这样就制定了插槽的名字
Vue.component('navigation-link', {
  template: `<div class="container">
                 <header>
                      // 这是个具名插槽
                      <slot name="header"></slot>
                 </header>
                 <main>
                      // 这是个默认插槽
                      <slot></slot>
                 </main>
                 <footer>
                      // 这是个具名插槽
                      <slot name="footer"></slot>
                 </footer>
             </div>`,
});

使用

<template>
  <navigation-link>
    // v-slot:名字，也就是具名插槽name="名字"中的名字
    <template v-slot:header>
      <h3>这是页面标题</h3>
    </template>
    // 如果插槽是默认值这里也可以不写 v-slot:default
    <template v-slot:default>
      <p>这是页面内容</p>
    </template>
    <template v-slot:footer>
      <h3>这是页脚</h3>
    </template>
  </navigation-link>
</template>

// 当然你也可以这么写,这个写法和上面的等价
<template>
  <navigation-link>
    // 对于v-slot:名字我们也可以写成 #名字 效果是一样的
    <template #header>
      <h3>这是页面标题</h3>
    </template>
    // 如果插槽是默认值这里就可以写成#default
    <template #default>
      <p>这是页面内容</p>
    </template>
    <template #footer>
      <h3>这是页脚</h3>
    </template>
  </navigation-link>
</template>

结果

图3

作用域插槽

示例

<script>
  import Vue from 'vue'
  Vue.component('current-user', {
    template: `<div class="container">
                   <span>
                        <slot :user="user">{{user.lastName}}</slot>
                   </span>
               </div>`,
    data() {
      return {
        user: {
          firstName:'彦宏',
          lastName:'李'
        }
      }
    },
  });
  ......
</script>

使用

// 这里定义了个props，这个名字你可以随便起，#default="slotProps"...都可以
<current-user #default="props">
  {{props.user.firstName}}
</current-user>

结果

图4

解构插槽

有了ES6的解构赋值，我们相应的也会有解构插槽，这个比上面的作用域要灵活一些，结果和上个作用域插槽的一样哦 推荐！！

  // 这个解构的是:user="user", 如果是:kitty="user"那么就应该写#default="kitty"
  <current-user #default="{user}">
    {{user.firstName}}
  </current-user>