vue组件component的注册与使用详解
更新时间：2022年08月04日 12:33:24 作者：游小北
组件是Vue是一个可以重复使用的Vue实例, 它拥有独一无二的组件名称,它可以扩展HTML元素,以组件名称的方式作为自定义的HTML标签，这篇文章主要介绍了vue组件component的注册与使用,需要的朋友可以参考下
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自定义指令的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
对于Element组件的使用,最主要的就是明确自己想要达到的效果,从官网中将对应代码复制粘贴即可,最重要的是要读懂不同组件官网中提供的文档,以便实现自己想要的效果,本文给大家介绍Vue组件库Element-常见组件表格,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要为大家详细介绍了Vue的diff算法原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要为大家详细介绍了vue实现登录类型切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要为大家介绍了vue3中如何使用shaka-player示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
今天小编就为大家分享一篇vue 中固定导航栏的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要给大家介绍了关于vue使用echarts图表自适应的几种解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
vue2.0 computed 计算list循环后累加值的实例
下面小编就为大家分享一篇vue2.0 computed 计算list循环后累加值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了讲解vue-router之命名路由和命名视图，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要为大家详细介绍了Vue实现图片验证码生成，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论