Vue前端开发，组件及组件的使用

什么是组件

组件(Component)是Vue中最强大的功能之一，每个Vue 文件就是一个个独立的组件，组件也可以被其他组件调用，形成嵌套关系，大部分的应用都是由各类不同功能的小组件进行构建，形成一个功能强大的大组件树系统，如下图所示。

可以说组件是应用开发的核心，是系统构建的基础，其重要性不言而喻，每个组件是功能可复用的独立的封装代码，它可以像使用普通标签一样，直接在模板中使用，从而进一步扩展了HTML 标签，它有下列二种定义方式。

单文件组件

单文件组件简称为(SFC)，它是指在使用脚手架构建项目时，自动生成的一个扩展名为.vue的单独文件，而在这个文件中，就是一个定义好的Vue 组件，如代码所示。

<template>
    <div>{
   
   {
   
    tip }}</div>
</template>
<script>
export default {
   
   
    name:"Base",
    data() {
   
   
        return {
   
   
            tip: "今天的天气非常不错！"
        }
    }
}
</script>

JavaScript 对象

除使用脚手架创建项目时，自动定义 Vue 组件之外，还可以在js文件中定义一个包含 Vue 特定选项的JavaScript 对象，这也是定义了一个Vue 组件，如下代码所示。

export default {
   
   
    data() {
   
   
        return {
   
   
            tip: "今天的天气非常不错！"
        }
    },
    template: `
    <div>{
   
   {
   
    tip