Vue 组件的编写、导入、注册

富士康质检员张全蛋

已于 2024-02-21 15:31:43 修改

阅读量285

点赞数

分类专栏： Vue.js 文章标签： vue.js

于 2023-07-13 09:21:22 首次发布

本文链接：https://blog.csdn.net/qq_34556414/article/details/131652038

版权

Vue.js 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

vue的特点

第一个板块推荐活动，可以将绿色框里面这部分内容变为一个文件。.vue里面写的是绿色框里面这部分功能对应的html结构，css样式以及js的交互。

在vue里面一个.vue就是一个组件，如果以后别人也想使用绿色框里面的这些功能，结构样式交互都想用，只需要将.vue文件引入进去就会看到所有的功能都能够拿到。

如果有一天想要修改新闻的布局，那么就来到News.vue里面改下html结构就可以了。就是改了其中一个vue里面的css绝对不会影响其他的vue里面的css，因为封装到这个组件里面了。这就是组件化编码和模式。一个.vue就是一个组件。

<template>
    <div class="login">
        <!--设置卡片头部-->
        <!--通过header设置插槽，插槽最大的特点就是可以将html以及文本都放进去-->
        <!--插槽其实就是预留了位置-->
        <el-card class="login-card">
            <template #header>
                <div class="login-card-header">
                    <span>用户登录</span>
                </div>
            </template>
        </el-card>
    </div>
</template>

<style scoped>
/*style中要加scoped,scoped用于各个页面之间的css属性的隔离，避免互相污染全局生效*/
.login{
    position: absolute; /*图片平铺开来*/
    width: 100%;/*最外层已经是body，有一层vh和vw了，其实定义完最外层就可以了，login会继承*/
    height: 100%;
    background-image: url(../../assets/img/bg.jpg);
    background-size: 100%;
}

.login-card{
    position: absolute;
    left: 35%;
    top: 35%;
    width: 450px;
}

.login-card-header{
    text-align: center;
}
</style>

组件介绍

组件：一段独立的，能代表页面某一个部分的代码片段，拥有自己独立的数据、JavaScript脚本、以及CSS样式。（又有html，又有css，还有js，一个组件就是一个vue的文件）

<template>
...........................................
</template>

<script>
...........................................
</script>

<style>
..........................................
</style>

组件是可复用的Vue实例，在开发过程中可以把经常重复的功能，封装为组件，达到快捷开发的目的。（多个页面使用同一个组件是没有问题的，后端封装的是方法，前端封装的是视图.vue）

组件的好处：

提高开发效率
方便重复使用
易于管理和维护

通常一个应用会以一棵嵌套的组件树的形式来组织，如图所示。例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

它是一整块页面，页面又分为好几个区域，每个区域有不同的组件去组成起来的，最上层的是主组件，下面是有多个页面，每个页面里面又引入了不同的组件。

文件格式

Vue单文件组件(又名*.vue文件，缩写为SFC)是一种特殊的文件格式，它允许将Vue组件的模板、逻辑与样式封装在单个文件中。

正如所见， Vue SFC 是经典的 HTML 、 CSS 与 JavaScript 三个经典组合的自然延伸。每个 *.vue 文件由三种类型的顶层代码块组成：template 、 script 与 style:

<template> 部分定义了组件的模板。（在最前端展示的样式，单个的视图作为最外层的标签，里面再去写不同的html元素）
<script> 部分是一个标准的JavaScript模块，它应该导出一个vue组件定义作为其默认导出。（定义一些动作）
<style> 部分定义了与此组件关联的css。（定义样式）

在vue的文件里面：

<template>
   <p class="greeting"> {{ greeting }} </p>
</template>

<script>
export default {
    data() {
        return {
            greeting: 'Hello World!'
    }
  }
}
</script>

<style scoped>
 .greeting {
   color: red;
   font-weight: bold;
  }
</style>

在html里面每次都得去初始化一次vue实例，但是一个vue项目里面只需要初始化一次就行了。所有页面基于上面的格式去写就行了。

上面就是一个简单的vue的页面，在vue里面，单个的视图全部是template作为最外层视图的标签，然后里面再去写不同的html元素。

编写组件、组件使用

在src/components目录里开发一个组件文件(首字母大写)
在父组件里引用子组件 import xxx from 'xxx'
在默认导出里注册组件
在template模板里使用组件

（1）创建组件（开发一个组件），写一个Test.vue组件

<template>
    <div>
        <button @click="btn()">Test按钮</button>
    </div>
</template>

//这里不使用vue2的语法
<script>
export default({
    data() {
        return{
            
        }
    },
    methods:{
       btn(){
        console.log("test按钮点击之后效果")
       }
    }
})
</script>

上面就相当于封装了一个组件，这个组件里面只有一个按钮，没有多余的视图。上面就相当于开发完了组件，下面就需要注册组件了。

（2）注册组件和使用组件

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。

局部注册：在使用组件的vue文件中声明和使用，一般只需要解耦代码时使用（只能在当前模板中使用，写在当前页面，只能在当前页面使用）
全局注册：声明一次，在任何vue文件模板中使用，一般使用该组件的地方多时使用

全局注册

导入全局的组件，或者vue生命周期的创建，挂载都在main.js里面。组件注册和导入vue依赖的包配置在main.js配置。vue里面有一个createApp的方法，只将这个方法导入进来（import { createApp } from 'vue'）。这个是导入整个vue页面视图（import Test from '@/components/Test.vue'）

//导入vue中的createApp方法，这里的createApp是原生方法名称，不能改
import { createApp } from 'vue'
import App from './App.vue'

//导入组件，这种方式是将整个Test.vue界面都导入进来,这里的Test是别名可以随便取
//（@代表src目录）
//在App.vue中使用该组件使用的是别名导入<别名><别名>
import Test from '@/components/Test.vue'

//这里需要修改原来自动生成的代码 createApp(App).mount('#app')，分为两步
const app = createApp(App)

//使用component去注册全局组件，第一个参数是组件名称自定义,全局使用的时候使用这个名称
//第二个参数是上面定义的组件import Test from '@/components/Test.vue'
app.component('Test',Test)

app.mount('#app')

一个是组件的名称，另外一个是全局使用或者局部使用的名称

vue全局组件，导入包设置一般都写在main.js里面，上面就全局导入完毕。所有的视图入口都在App.vue（App.vue相当于main.go，所有的视图都是从App.vue展示出来的）。全局组件是不需要在App.vue components里面去加载的，局部的需要。

在components组件目录下开发完之后，不关心组件里面的内容，随便写啥都行。开发完之后去注册组件，去main.js里面导入组件，然后全局去注册这个组件，其实也即是将组件注册到vue实例上面去了，所以这里就可以直接使用了，那么全局的.vue文件都可以使用。

App.vue （因为全局注册了，直接使用即可）

<template>
  <Test></Test>
</template>

自己先去开发一个组件，不关心组件里面的内容，开发完之后注册组件，要么全局注册导入这个组件，main.js里面导入组件import Test from '@/components/Test.vue'，然后再去注册这个组件app.component('Test',Test)，这样就注册到vue实例上面去了。

所以在App.vue就可以使用了 <Test></Test>。mian.js注册在vue上面的东西全局的.vue文件都可以使用，那么就不需要在App.vue的script里面进行导入了。

App.vue是所有组件视图的入口，看见的视图全部是从App.vue里面展示出来的。

局部注册，哪里使用就哪里导入

首先将文件导入进来，然后给其一个别名，然后在export defalut里面写进去即可，在这里面可以写components，data，methods，包括watch compute 都是在这里面去写的。

<template>
  <img alt="Vue logo" src="./assets/logo.png">

 <!--第三步，在下方局部注册了之后，就可以在vue文件当中使用-->
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <Test></Test>

</template>

<script>
//导入组件（局部注册组件的方式）
//第一步，引入组件文件给别名
import HelloWorld from './components/HelloWorld.vue'
import Test from './components/Test.vue'

export default {
 //第二步，声明使用这个组件，加载组件
  name: 'App',
  components: {
    HelloWorld,
    Test
  }
}
</script>