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>

3.4 最终页面效果：

vue 自定义组件创建及其使用相关推荐

Vue自定义组件并引入
今天,bug菌为大家带来一期帝王级干货,有关于前端vue的组件教学,深入指引大家在vue中如何创建自定义的组件,并且在vue中引入你自定义的组件: 具有很好的教学价值,希望小伙伴们根据这篇文章可以有所 ...
vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件生成 Maker let rule = [ formCreat ...
vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...
Vue自定义组件封装及使用Excel
Vue自定义组件封装及使用Excel 一.js-xlsx 组件安装二. 创建vue组件三.使用四.效果图一.js-xlsx 组件安装 npm install xlsx --savenpm in ...
vue自定义组件-文件上传后端接口
学习目标: vue自定义组件-文件上传后端接口学习内容: 准备工作: 后端环境:JAVA-Springboot项目数据库表(这里使用psql数据库):sys_file_record保存上传文件的信息 ...
如何运用Vue自定义组件以及组件的传值
Vue自定义组件引入组件首先在项目内的components新建.vue文件. 创建完成之后搭建完整的框架.其实就是新建组件,在此之前,需要在VScode中引入一个插件(vue 2 snippets ...
vue自定义组件，插槽，自定义事件
vue组件套娃 1. vue自定义组件 2. 组件和插槽套娃 3. vue组件通过自定义事件更改vue实例中的数据 1. vue自定义组件语法 Vue.component('自定义组件名', {pr ...
Vue自定义组件之时间跨度选择器
时间跨度选择器该组件是个时间跨度选择器. 基于 vue自定义组件之选择器和 Vue自定义组件之日期时间范围选择器点击选框,下拉列表中有四个选项,点击自定义时间,后边会出现日期时间范围选择代码 ...
Vue自定义组件npm上传私服，且从私服下载使用
Vue自定义组件npm上传私服,yarn私服下载使用安装镜像源管理工具nrm 发布自定义组件到公司私服若未下载nrm源管理工具直接使用npm设置私服地址也可以以下步骤都是基于npm命令从私服下 ...

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

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

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

2.自定义组件局部注册

3. 自定义组件举例

3.1项目文件结构

3.2 个组件内容定义

3.3 自定义组件使用：

3.4 最终页面效果：

vue 自定义组件创建及其使用相关推荐

最新文章

热门文章

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

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

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

2.自定义组件局部注册

3. 自定义组件举例

3.1项目文件结构

3.2 个组件内容定义

3.3 自定义组件使用：

3.4 最终页面效果：

vue 自定义组件 创建及其使用相关推荐

最新文章

热门文章

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

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

vue 自定义组件创建及其使用相关推荐