组件介绍

组件结构
组件注册
组件名

组件结构

在 Vue 中支持单文件组件，也就是一个文件对应一个组件，这样的文件以 .vue 作为后缀。

一个组件会包含完整的一套结构、样式以及逻辑

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<style scoped>
button{
  padding: 15px;
}
</style>

setup

在 Vue3 初期，需要返回一个对象，该对象中包含模板中要用到的数据状态以及方法。

import { ref } from 'vue'
export default {
  setup() {
    // 在这里面定数据和方法
    const count = ref(0)
    function add() {
      count.value++
    }
    return {
      count,
      add
    }
  }
}

从 Vue3.2 版本开始，推出了 setup 标签，所有定义的数据状态以及方法都会自动暴露给模板使用，从而减少了样板代码。

另外 setup 标签语法还有一些其他的好处：

有更好的类型推断(TS)
支持顶级 await

scoped

定义组件私有的 CSS 样式，也就是说写的样式只对当前组件生效。如果不书写 scoped，那么样式就是全局生效。

除了单文件组件的形式来定义组件外，还可以使用对象的形式来定义组件：

export default {
  setup(){
    // 定义数据
    const count = ref(0)
    return { count }
  },
  template: `<div>{{count}}</div>`
}

下面是一个具体的例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <template id="my-template-element">
        <div>
            <h1>{{ count }}</h1>
            <button @click="count++">Increment</button>
        </div>
    </template>
    <script src="https://unpkg.com/vue@3.2.31"></script>
    <script>
      const { createApp, ref } = Vue;
      const App = {
        setup() {
          const count = ref(0);
          return { count };
        },
        template: "#my-template-element",
      };
      createApp(App).mount("#app");
    </script>
  </body>
</html>

组件注册

组件注册分为两种：

全局注册
局部注册

全局注册

使用 Vue 应用实例的 .component( ) 方法来全局注册组件，所注册的组件全局可用。

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)

import MyComponent from './App.vue'
app.component('MyComponent', MyComponent)

Component 方法是可以链式调用的

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

局部注册

局部注册就是在哪个组件里面用到了 TestCom 这个组件，那么就在当前的组件里面引入它，然后通过 components 配置项进行注册一下即可。

<template>
  <button @click="add">Count is: {{ count }}</button>
  <TestCom />
</template>

<script>
import { ref } from 'vue'
import TestCom from './components/TestCom.vue'
export default {
  // 局部注册
  components: {
    TestCom
  },
  setup() {
    // 在这里面定数据和方法
    const count = ref(0)
    function add() {
      count.value++
    }
    return {
      count,
      add
    }
  }
}
</script>

<style scoped>
button {
  padding: 15px;
}
</style>

如果是 setup 标签语法糖，那么只需要导入组件即可，不需要使用 components 配置项来进行注册，因为导入后在模板中使用时会自动注册：

<template>
  <button @click="add">Count is: {{ count }}</button>
  <TestCom />
</template>

<script setup>
import { ref } from 'vue'
import TestCom from './components/TestCom.vue'
// 在这里面定数据和方法
const count = ref(0)
function add() {
  count.value++
}
</script>

<style scoped>
button {
  padding: 15px;
}
</style>

实际开发的时候，推荐使用局部注册

全局注册无法很好的 tree-shaking
全局注册的组件在大型项目中无法很好的看出组件之间的依赖关系

组件名

推荐使用大驼峰作为组件名。

但是大驼峰在 DOM 内模板中无法使用

组件在应用层面，有三个核心知识点：

Props
自定义事件
插槽