普通组件的注册使用-局部注册
一. 组件注册的两种方式:
1.局部注册:只能在注册的组件内使用
(1) 创建 vue 文件(单文件组件)
(2) 在使用的组件内导入,并注册 components:{ 组件名: 组件对象 }
// 导入需要注册的组件
import 组件对象 from.vue文件路径
import HmHeader from './components/XxHeader'
export default {
// 局部注册
components: {
组件名: 组件对象
HmHeader: HmHeader
}
}
2.全局注册:所有组件内都能直接使用(不需要再次导入)
(1) 创建 .vue文件(单文件组件)
(2) main.js 内导入, 并进行全局注册 Vue.component(组件名, 组件对象)
// main.js
// 导入需要全局注册的组件
import XxButton from './components/XxButton'
// 调用 Vue.component 进行全局注册
// Vue.component('组件名',组件对象)
Vue.component('XxButton', XxButton )
二. 使用:
* 当成 html 标签使用 <组件名></组件名>
* 技巧: 一般都用局部注册,如果发现确实是通用组件,再抽离到全局
三. 注意:文章来源:https://www.toymoban.com/news/detail-660576.html
* 组件名规范 -> 大驼峰命名法, 如 XxHeader文章来源地址https://www.toymoban.com/news/detail-660576.html
局部注册代码演示:
// 子组件: components / XxHeader.vue
<template>
<div class="xx-header">
我是头部组件xx-header
</div>
</template>
<script>
export default{
}
</script>
<style>
.xx-header{
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
background-color: #8064a2;
color:white;
}
</style>
//子组件: components / XxMain.vue
<template>
<div class="xx-main">
我是主体组件xx-main
</div>
</template>
<script>
export default{
}
</script>
<style>
.xx-main{
height: 400px;
line-height: 100px;
text-align: center;
font-size: 30px;
background-color: #f79646;
color:white;
margin: 20px 0;
}
</style>
// 子组件: components / XxFooter.vue
<template>
<div class="xx-footer">
我是低部组件xx-footer
</div>
</template>
<script>
export default{
}
</script>
<style>
.xx-footer{
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
background-color: #4f81bd;
color:white;
}
</style>
// 根组件 App.vue
<template>
<div class="App">
<!-- 头部组件 -->
<XxHeader></XxHeader>
<!-- 主体组件 -->
<XxMain></XxMain>
<!-- 底部组件 -->
<XxFooter></XxFooter>
<!--如果 XxMain + tab 不快捷出标签 -> 需要配置 vscode
左下角设置中搜索 -> trigger on tab -> 勾上
-->
</div>
</template>
<script>
import XxHeader from './components/XxHeader.vue'
import XxMain from './components/XxMain.vue'
import XxFooter from './components/XxFooter.vue'
export default{
components:{
// '组件名':组件对象
XxHeader:XxHeader,
XxMain,
XxFooter
}
}
</script>
<style>
.App{
width: 600px;
height: 700px;
background-color: #87ceeb;
margin: 0 auto;
padding: 20px;
}
</style>
全局注册代码演示:
// 子组件: components / XxButton.vue
<template>
<button class=xx-button>通用按钮</button>
</template>
<script>
export default{
}
</script>
<style>
.xx-button{
height: 50px;
line-height: 50px;
padding: 0 20px;
background-color: #3bae56;
border-radius: 5px;
}
</style>
// main.js 进行全局注册
// 文件核心作用: 导入App.vue, 基于App.vue创建结构渲染index.html
import Vue from 'vue'
import App from './App.vue'
// 1. 编写导入的代码,往代码的顶部编写(规范)
import XxButton from './components/XxButton'
Vue.config.productionTip = false
// 2. 组件进行全局注册 -> 在所有的组件范围内都能直接使用
// Vue.component(组件名,组件对象)
Vue.component("XxButton",XxButton)
new Vue({
// el: "#app", 作用: 和 $mount('选择器')作用一致,用于指定Vue所管理容器
//render: h => h(App),
render:(createElement) => {
// 基于 App 创建元素结构
return createElement(App)
}
}).$mount('#app')
// 在其他组件直接使用(不需要导入) XxFooter.vue
<template>
<div class="xx-footer">
我是低部组件xx-footer
<!-- 全局组件使用 -->
<XxButton></XxButton>
</div>
</template>
到了这里,关于19-普通组件的注册使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!