普通组件的注册使用-局部注册
一. 组件注册的两种方式:
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 标签使用 <组件名></组件名>
* 技巧: 一般都用局部注册,如果发现确实是通用组件,再抽离到全局
三. 注意:
* 组件名规范 -> 大驼峰命名法, 如 XxHeader
局部注册代码演示:
// 子组件: 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.htmlimport 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>
