7、插槽

插槽（slot）

插槽的作用

• 组件的插槽，为了让我们封装的组件更具有扩展性，例如导航栏封装为一个nav-bar组件，但是不同的使用，组件的样式都不一样
• 可以让使用者决定组件内部的一些内容展示什么（对组件进行扩展）

使用

默认插槽（单个组件，一个插槽）

子组件

<template>
  <div>
      <!-- 组件的固有内容 -->
      <h1>title</h1>
      <!-- 声明插槽，默认将组件替换为组件使用者放入组件标签的所有内容-->
      <slot>
          <!-- 默认值，组件使用者未添加内容到组件标签中，就会展示默认值 -->
          <h2>defalut</h2>
      </slot> 
  </div>
</template>

<script>
export default {
    name: "MyComp"
}
</script>

父组件

<template>
  <div>
    <MyComp>
      <!-- 组件标签内内容，将会替换组件的插槽slot标签 -->
      <h2>Hello World</h2>
    </MyComp>
  </div>
</template>

<script>
import MyComp from './components/MyComp.vue'

export default {
  name: 'App',
  components: {
    MyComp
  }
}
</script>

具名插槽（单个组件中，多个插槽）

子组件

<template>
  <div>
      <!-- 组件的固有内容 -->
      <h1>title</h1>
      <!-- 声明插槽1-->
      <slot name="slot1">
          <h2>defalut1</h2>
      </slot>
      <!-- 声明插槽2 -->
      <slot name="slot2">
          <h2>defalut2</h2>
      </slot> 
  </div>
</template>

<script>
export default {
    name: "MyComp"
}
</script>

父组件

<template>
  <div>
    <MyComp>
      <!-- 替换slot1插槽,对于没有替换的插槽,还是使用默认值 -->
      <h2 slot="slot1">Hello World</h2>
    </MyComp>
  </div>
</template>

<script>
import MyComp from './components/MyComp.vue'

export default {
  name: 'App',
  components: {
    MyComp
  }
}
</script>

作用域插槽

父组件的模板的所有东西都会在父级作用域内编译，子组件的模板的所有东西都会在子级作用域内编译

作用域插槽的作用：父组件替换插槽的标签，但是数据由子组件提供，也就是样式不同、数据相同

子组件

<template>
  <div>
      <!-- 组件的固有内容 -->
      <h1>title</h1>
      <!-- 声明插槽,并且将msg传给组件的使用者-->
      <slot :msg="msg">
          <h2>defalut1</h2>
      </slot>
  </div>
</template>

<script>
export default {
    name: "MyComp",
    data() {
        return {
            msg: 'Hello World',
        };
    },
}
</script>

父组件

<template>
  <div>
    <MyComp>
      <!-- 组件的使用者,需要使用slot-scope接收子组件传来的数据-->
        <h2 slot-scope="childData">{{childData.msg}}</h2>
    </MyComp>
  </div>
</template>

<script>
import MyComp from './components/MyComp.vue'

export default {
  name: 'App',
  components: {
    MyComp
  }
}
</script>