组件基础

组件(Component)是Vue最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生HTML元素。

组件化的好处

提高代码复用率；
方便进行组件组合、调整、移动；
提高开发效率；

组件的构成

每个.vue组件文件包含三种类型的顶级语言块：

<template>：模板，描述组件的UI结构；
<script>：脚本，包含组件的逻辑；
<style>：样式，描述组件的样式。

其中，<template> 是必须的，其他两个不是必须的。

在组件的 <template> 节点中，支持前面所学的指令语法渲染当前组件的 DOM 结构。

template节点

在vue 2.x的版本中， <template> 节点内的DOM结构只能有一个根节点：

vue

<template>
  <div>
    <h1>跟组件</h1>
    <hr />
    <p>这是跟组件的内容</p>
  </div>
</template>

在vue 3.x的版本中，可以有多个根节点。

vue

<template>
  <h1>跟组件</h1>
  <hr />
  <p>这是跟组件的内容</p>
</template>

script节点

组件内的 <script> 节点是可选的，如果需要定义组件的逻辑，则需要在该组件内进行定义。

vue

<script>
  export default {
    name: 'MyComponents',
    data() {
      return {
        message: 'hello world',
      };
    },
    methods: {},
  };
</script>

可以通过name节点为当前组件定义一个名称，清晰的区分每个组件。

在<script setup>节点中无法使用export default 语法，一些组件的更改选项无法在<script setup>中使用，例如name。我们可以在上方再定义一个<script>节点，在其中使用export default 语法。

vue

<script>
  export default {
    name: 'MyComponents',
  };
</script>
<script setup>
  import { ref } from 'vue';
  const count = ref(0);
</script>

style节点

组件内的 <style> 节点是可选的，如果需要美化当前组件的UI结构，则需要在该组件内进行定义

vue

<style scoped lang="scss">
  h1 {
    color: red;
  }
</style>

其中 <style> 标签上的 lang="scss" 属性是可选的，它表示所使用的样式语言。默认只支持普通的 css 语法，可选值还有 less、scss 等。加上 scoped ，可以防止样式冲突，不加的话，父组件的样式会在子组件上生效。如果加了 scoped，还想让样式在在子组件生效，可以给需要生效的样式加上 /deep/ , 在vue3 中，改成了加 :deep(这里放class，id等名字)。

组件基础 ​

组件化的好处 ​

组件的构成 ​

template节点 ​

script节点 ​

style节点 ​