Vue3项目开发实战入门系列（4.-组件和样式）

2023-12-16 11:53:45

Vue3单文件组件

Vue3的单文件组件在结构上和Vue2并无区别，都是由template | script | style 3个部分组成，以下就是一个普通的单文件组件结构。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello World',
      content: 'This is a Vue.js component.'
    }
  }
}
</script>

<style>
h1 {
  color: red;
}

p {
  color: blue;
}
</style>

组件的封装

为了方便项目开发，我们需要组件具备以下功能。

可复用性： 组件可以被多次复用，而无需重复编写代码。
可维护性： 组件可以独立维护，而无需影响其他代码。
可测试性： 组件可以独立测试，而无需依赖其他组件。

组件库的创建

组件库是一个包含多个组件的集合。组件库可以帮助我们快速构建应用程序，而无需从头开始编写代码。

项目开发中的组件使用

在项目开发中，我们可以通过以下方式使用组件。

直接在项目中使用： 我们可以直接将组件添加到项目中，而无需创建组件库。
通过组件库使用： 我们可以先创建组件库，然后将组件库添加到项目中。

测试一下效果

新建一个按钮组件 src/components/CtButton.vue。

<template>
  <button type="button" class="btn btn-primary">{{ text }}</button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: '按钮'
    }
  }
}
</script>

在组件中，我们定义了一个名为 text 的 prop，它是一个字符串类型，默认为 按钮。这个 prop 将作为按钮的文本内容。

然后，在 main.js 文件中，我们将组件注册为全局组件。

import CtButton from '@/components/CtButton.vue'

Vue.component('ct-button', CtButton)

现在，我们可以在项目中使用这个组件了。例如，在 App.vue 文件中，我们可以这样使用它：

<template>
  <div>
    <ct-button text="点击我"></ct-button>
  </div>
</template>

<script>
import CtButton from '@/components/CtButton.vue'

export default {
  components: {
    CtButton
  }
}
</script>