网站建设应对客户问题的话术,美术馆网站建设,租车网站制作,长沙市建设网站普通组件的注册使用-局部注册
一. 组件注册的两种方式:1.局部注册:只能在注册的组件内使用 (1) 创建 vue 文件(单文件组件) (2) 在使用的组件内导入,并注册 components:{ 组件名: 组件对象 } // 导入需要注册的组件
import 组件对象 from.vue文件路径
import HmHeader from ./…普通组件的注册使用-局部注册
一. 组件注册的两种方式:1.局部注册:只能在注册的组件内使用 (1) 创建 vue 文件(单文件组件) (2) 在使用的组件内导入,并注册 components:{ 组件名: 组件对象 } // 导入需要注册的组件
import 组件对象 from.vue文件路径
import HmHeader from ./components/XxHeaderexport 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
templatediv classxx-header我是头部组件xx-header/div/templatescriptexport default{}/scriptstyle.xx-header{height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #8064a2;color:white;}/style
//子组件: components / XxMain.vue
templatediv classxx-main我是主体组件xx-main/div/templatescriptexport default{}/scriptstyle.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
templatediv classxx-footer我是低部组件xx-footer/div/templatescriptexport default{}/scriptstyle.xx-footer{height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #4f81bd;color:white;}/style
// 根组件 App.vue
templatediv classApp!-- 头部组件 --XxHeader/XxHeader!-- 主体组件 --XxMain/XxMain!-- 底部组件 --XxFooter/XxFooter!--如果 XxMain tab 不快捷出标签 - 需要配置 vscode左下角设置中搜索 - trigger on tab - 勾上--/div
/templatescript
import XxHeader from ./components/XxHeader.vue
import XxMain from ./components/XxMain.vue
import XxFooter from ./components/XxFooter.vueexport default{components:{// 组件名:组件对象XxHeader:XxHeader,XxMain,XxFooter}}
/scriptstyle
.App{width: 600px;height: 700px;background-color: #87ceeb;margin: 0 auto;padding: 20px;
}
/style 全局注册代码演示:
// 子组件: components / XxButton.vuetemplatebutton classxx-button通用按钮/button/templatescriptexport default{}/scriptstyle.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/XxButtonVue.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.vuetemplatediv classxx-footer我是低部组件xx-footer!-- 全局组件使用 --XxButton/XxButton/div/template
