vue 自定义组件创建及其使用

最新推荐文章于 2024-08-01 03:56:53 发布

神笔码靓

最新推荐文章于 2024-08-01 03:56:53 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/daxues_/article/details/113875258

版权

本文介绍了Vue自定义组件的全局和局部注册方法，以aside和header为例，演示如何在项目中使用并展示了实际的文件结构和代码片段。重点讲解了如何通过import导入和在父组件中定义组件，以及如何优化组件管理以减少JavaScript冗余。

摘要由CSDN通过智能技术生成

vue 自定义组件创建及其使用

1.vue 自定义组件有全局注册和局部注册两种方式；

全局注册通过 Vue.component 来创建组件，这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中；

全局注册所有的组件意味着即便你已经不在使用一个组件了，它任然会包含在你最终的构建结果中，这造成了用户现在的JavaScript 的无谓增加。

2.自定义组件局部注册

2.1 创建组件名.vue 文件，编写组件内容；如果组件还包括其他组件，可创建以该组件名命名的文件夹，并创建index.vue

2.2 使用在使用自定义组件时需通过 import 导入，并在父组件 components 中定义；

3. 自定义组件举例

3.1项目文件结构

在这里插入图片描述
这里自定义了两个组件，分别是aside 和header ,对应网页的头部和左侧菜单部分；前端vue 引用 element-ui 桌面组件库；

layout 为前端网页布局定义，网页布局所需组件全部存放在components文件夹下；

3.2 个组件内容定义

headers/index.vue 文件内容：

<template>
    <el-row>
        <el-col :span="6">
            <div>
                <p>这是左侧部分</p>
            </div>
        </el-col>
        <el-col :span="6" class="headerRight">
            <div>
                 <el-button type="primary" @click="loginOut">退出</el-button>
            </div>        
        </el-col>        
    </el-row>
</template>
<script>
export default {
    data(){
        return {}
    },
    methods:{
        loginOut(){
            this.$message('这是一条消息提示');
        }
    }
}
</script>
<style scoped>
.headerContainer{
    display: inline;
}
.headerLeft{
    background-color: blue;
}
.headerRight{
    height: 100%;
    float: right;  
    
}
.headerRight div{
    height: 100%;
    margin-top: 10px;
    text-align: right;
}
</style>

asides/index.vue 文件内容：

<template>
    <p>这是aside 组件</p>
</template>
<script>
export default {
    
}
</script>

3.3 自定义组件使用：

layout/index.vue 加载自定义组件 headers 和 asides :

<template>
    <div class="layout">    
        <el-container class="contain-body">
            <el-aside >
                <asides/>
            </el-aside>
            <el-container>
                <el-header>
                    <headers/>
                </el-header>
                <el-main>main</el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import headers from './components/headers'
import asides from './components/asides'
export default {
    name: 'Layout',
    components: {
        headers,
        asides,
    }
}
</script>
<style lang='scss' scoped>
.layout{
    height: 100%;
}
.contain-body{
    height: 100%;
}
.el-header{
    background-color: #b3c0d1;
}
.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}
</style>