vue组件component的注册与使用详解
目录
- 1.什么是Vue组件
- （1）定义
- （2）父子关系
- 2.Vue组件使用（注册方式）
- 1.局部注册（私有组件注册）
- 2.全局注册
- 3.使用组件的步骤：
1.什么是Vue组件
（1）定义
组件是Vue是一个可以重复使用的Vue实例, 它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签。
因为组件是可复用的Vue实例, 所以它们与new Vue() 接收相同的选项
例如 data, computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。 把一些公共的模块抽取出来,然后写成单独的的工具组件或者页面,在需要的页面中就直接引入即可。
（2）父子关系
组件在封装好之后不存在父子关系，彼此相互独立，在嵌套使用时才存在父子关系。
2.Vue组件使用（注册方式）
1.局部注册（私有组件注册）
通过 component 节点注册的是私有子组件
在父组件文件中：
（1）引入组件语法如下：
import '组件对象' from 'URL'
（2）导出组件 语法如下：
export default { }
（3）代码演示：
import hello from './components/hello.vue'
// export default {} 是固定写法 为了导出App组件
export default {
//此处定义了私有组件！
components: { hello },
2.全局注册
（1）在main.js文件中，引入 import '组件对象' from '文件路径'
（2）组件注册：Vue.component ('组件名'，'组件对象')
import Vue from 'vue'
import App from './App.vue'
//导入全局组件 world.vue
import world from '@/components/world.vue'
//注册 world.vue 组件
Vue.component('world', {
//可直接缩写为 world
'world': world
})
//-------以下为此全局组件（world.vue）的代码---------
<template>
<div id="world">
world vue.js
</div>
</template>
<script>
export default {
name: 'world'
}
</script>
（3）最终效果
3.使用组件的步骤：
（1）在App.vue（即父组件） 中 script 标签中 使用 import 语法导入需要的组件
代码示例：
import hello from '@/component/hello.vue'
（2）接着使用 component 节点注册组件
代码示例：
export default {
data{},
component: {
// 'hello':hello简写为hello
hello
}
}
（3）以标签形式使用注册好的组件
代码示例：
<template>
<div id='box'>
<hello></hello>
</div>
</template>
感谢阅读！
以下为App.vue、main.js 和 html 的完整代码：
<template>
<div id="app">
<button id="post" v-on:click="post">{{message1}}</button>
<button id="get" @click="get">{{message2}}</button>
<hello></hello>
<world></world>
</div>
</template>
<script>
//此处导入局部组件
import hello from './components/hello.vue'
import World from './components/world.vue'
// export default {} 是固定写法 为了导出App组件
export default {
//此处定义了私有组件！
components: { hello, World },
// 导出的App组件名使用 name:'xxx' 定义
name: 'App',
// 在Vue组件中，data不能和以前一样一以对象的形式，
// 而应该使用函数的形式，在 return 中可以定义数据
// 属性之间用逗号隔开
data () {
return {
message1 : '发送post请求',
message2 : '发送get请求'
}
},
methods: {
post() {
console.log('发送了post请求')
},
get() {
console.log('发送了get请求')
}
}
}
</script>
<style lang="less">
button {
display: block;
margin-top: 10px;
}
</style>
import Vue from 'vue'
import App from './App.vue'
//导入全局组件 world.vue
import world from '@/components/world.vue'
//注册 world.vue 组件
Vue.component('world', {
//可直接缩写为 world
'world': world
})
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<world></world>
</body>
</html>
到此这篇关于vue组件component的注册与使用的文章就介绍到这了,更多相关vue组件component内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
一.is的使用 参考Vue 2.0教程,有讲到 is 的使用: 解析 DOM 模板时的注意事项 有些 HTML 元素,诸如 <ul>.<ol>.<table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的.而有些元素,诸如 <li>.<tr> 和 <option>,只能出现在其它某些特定的元素内部. 这会导致我们使用这些有约束条件的元素时遇到一些问题.例如: <table> <blog
-
解决vue的router组件component在import时不能使用变量问题
webpack 编译es6 动态引入 import() 时不能传入变量,例如dir ='path/to/my/file.js' : import(dir) , 而要传入字符串 import('path/to/my/file.js'),这是因为webpack的现在的实现方式不能实现完全动态. 但一定要用变量的时候,可以通过字符串模板来提供部分信息给webpack:例如import(./path/${myFile}), 这样编译时会编译所有./path下的模块,但运行时确定myFile的值才会加载,
-
Vue 组件（component）教程之实现精美的日历方法示例
组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用不同的组件来拼接页面.这种开发模式使得前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦. 最近应公司的要求,需要开发一个精美的日历组件(IOS , 安卓, PC 的IE9+都能运行),写完后想把它分享出来,希望大家批评. 先来个截图 代码已经分享到 https://github.com/zhangKun
-
vue component组件使用方法详解
什么是组件 按照惯例,引用Vue官网的一句话: 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件component的注册 全局组件: Vue.component('todo-item',{ props:['grocery'], template:'<li>{{grocery.te
-
基于vue-upload-component封装一个图片上传组件的示例
需求分析 业务要求,需要一个图片上传控件,需满足 多图上传 点击预览 图片前端压缩 支持初始化数据 相关功能及资源分析 基本功能 先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件,没有完全满足需求的组件,过滤后找到 vue-upload-component 组件,功能基本都有,自定义也比较灵活,就以以此进行二次开发. 预览 因为项目是基于 vant 做的,本身就提供了 ImagePreview 的预览组件,使用起来也简单,如果业务需求需要
-
vue内置组件component--通过is属性动态渲染组件操作
我就废话不多说了,大家看代码吧~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.bootcss.com
-
vue 动态组件component
目录 1.component 2.keep-alive 2.1存在的问题 2.2使用keep-alive解决 2.3keep-alive的生命周期 2.4keep-alive 的 include, exclude属性 1.component 如何实现动态组件渲染 vue提供了一个内置的<component> ,专门用来实现动态组件的渲染. 这个标签就相当于一个占位符,需要使用is属性指定绑定的组件 <button @click="comName = 'Left'"&g
-
vue组件component的注册与使用详解
目录 1.什么是Vue组件 (1)定义 (2)父子关系 2.Vue组件使用(注册方式) 1.局部注册(私有组件注册) 2.全局注册 3.使用组件的步骤: 1.什么是Vue组件 (1)定义 组件是Vue是一个可以重复使用的Vue实例, 它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签. 因为组件是可复用的Vue实例, 所以它们与new Vue() 接收相同的选项 例如 data, computed.watch.methods以及生命周期钩子等.仅有的例外是
-
vue组件之间的数据传递方法详解
(1)props属性: 在父组件中,可以通过子组件标签属性的形式将数据或者函数传给子组件,子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件: 一般的属性值都是用来给子组件展示的 子组件传数据给父组件 属性值为函数类型的,一般是用来子组件向父组件传递数据,子组件通过调用父组件传过来的函数,可以修改父组件的状态数据 缺点: 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) 注意: //子组件获取父组件传过来的值 props: { obj: {//o
-
Vue组件化(ref,props, mixin,.插件)详解
目录 1.ref属性 2.props配置项 props总结 3.mixin混入 3.1.局部混入 3.2.全局混入 mixin混入总结 4.插件 插件总结 1.ref属性 被用来给元素或子组件注册引用信息(id的替代者) 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 使用方式: 打标识:<h1 ref="xxx">.....</h1>或 <School ref="xxx"></Schoo
-
vue组件生命周期钩子使用示例详解
目录 组件生命周期图 组件生命周期钩子 1.beforeCreate 2.created 3.beforeMount 4.mounted 5.beforeUpdate 6.updated 7.activated 8.deactivated 9.beforeDestroy 10.destroyed 11.errorCaptured 组件生命周期图 组件生命周期钩子 所有的生命周期钩子自动绑定 一.组件的生命周期:一个组件从创建到销毁的整个过程 二.生命周期钩子:在一个组件生命周期中,会有很多特殊的
-
vue 组件开发原理与实现方法详解
本文实例讲述了vue 组件开发原理与实现方法.分享给大家供大家参考,具体如下: 概要 vue 的一个特点是进行组件开发,组件的优势是我们可以封装自己的控件,实现重用,比如我们在平台中封装了自己的附件控件,输入控件等. 组件的开发 在vue 中一个组件,就是一个独立的.vue 文件,这个文件分为三部分. 1.模板 2.脚本 3.样式 我们看一个系统中最常用的组件. <template> <div > <div v-if="right=='r'" class=
-
vue组件命名和props命名代码详解
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <script src="https://cdn.jsdelivr.n
-
使用VitePress搭建及部署vue组件库文档的示例详解
目录 安装vitepress 目录结构 文档首页 配置 导航栏配置 侧边栏 部署到GitHub Pages 每个组件库都有它们自己的文档.所以当我们开发完成我们自己的组件库必须也需要一个组件库文档.如果你还不了解如何搭建自己的组件库可以看这里->从零搭建Vue3组件库.看完这篇文章你就会发现原来搭建和部署一个组件库文档是那么的简单.当然部署也不需要你有自己的服务器,你只要有github即可.由于我们的组件库还没有完成,所以下面就以element-plus作为示例来搭建一个文档吧. 安装vitep
-
Vue组件实现卡片动画倒计时示例详解
目录 前言 需求拆解 组件设计思路 具体开发 animate-clock.vue animate-card 项目中使用 后记 前言 最近有朋友在做投票的项目,里面有用到一个倒计时的组件,还想要个动画效果.cv大法浸染多年的我,首先想到的是直接找个现有的组件. 通过一通搜索,看上的只有一个 vue2-flip-countdown,但是当我要修改大小和颜色的时候发现改不了,从而直接把源码拉到项目里面,改起来也挺麻烦. 而且,在搜索大法运行几个周天以后,其实心理已经有了一个倒计时开发整体思路,便决定自
-
Vue.js分页组件实现：diVuePagination的使用详解
一.介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 二.创建初始化项目 这里不在详细说明,我们的分页演示只需要vue和vue-router就可以了,我们直接构建项目和设置配置. main.js:
-
Vue中的组件及路由使用实例代码详解
1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用 全局组件 <body> <div id="app"> <!-- 用全局组件的名称作为HTML的标签 --> <myzujian></myzujian> </div> </body> <script>