Vue框架基础6-单文件组件（SFC）

single-file components（单个文件组件）

文件后缀（扩展）名为 .vue，解决的问题：

• 全局定义组件可能会出现命名冲突
• 字符串的 template 没有语法高亮
• 对 CSS 的支持不友好
• 没有明显的构建过程
• …
  单文件组件语法：

<template>
  模板语法
</template>

<script>
  // 定义并导出组件的选项对象模块
</script>

<style lang="scss" scoped>
  /* 样式 */
  div {  }
</style>

• template：视图结构
• script：交互逻辑
• style：样式
  lang：使用 css 预处理器，如：scss、less
  scoped：表示所书写的样式仅支持在当前组件中使用，其它组件不受影响

Vue Loader

Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件

插槽

作用：内容分发
在组件定义时，可使用 <slot> 内置组件来占位，定义插槽内容。

  // <slot> 标签定义在要替换的组件 <template> 内部
  <template>
 <slot>
    <div class="title">代办事项列表</div>
 </slot>
 </template>
 // 这是替换 <slot> 插槽的内容 定义在调用组件标签的内部
  <todo-header>
      <p slot="title">主标题</p>
   <template v-slot:subtitle>副标题</template>
   // p 标签替换掉 <slot> 内部的 <div> 标签

在一个组件中，可以使用多个 <slot> 来定义插槽，要区分这些不同的插槽，就需要给 <slot> 添加 name属性，这就是命名插槽（具名插槽）。

// 用 属性 name 来命名区分插槽
<slot name="title">
    <div class="title">代办事项列表</div>
 </slot>

渲染命名插槽是的语法：

• Vue 2.6 之前：<p slot="slot-name"> 即在标签中使用 slot 属性指定插槽名称

 // 2.6 之前的版本使用 slot 属性来指定那个插槽
`<p slot="slot-name">`

• Vue 2.6 及之后：可使用 v-slot 指令：

<template v-slot:subtitle>
  <h3>副标题</h3>
</template>

v-slot 可简写为 #，即：

<template #subtitle>
  <h3>副标题</h3>
</template>