建筑公司网站模板免费下载,网络服务器架设,新乡搜索引擎优化,做视频网站怎么看不会卡普通组件的注册使用-局部注册
1.特点#xff1a;
只能在注册的组件内使用
2.实现效果 3.步骤#xff1a;
创建.vue文件#xff08;三个组成部分#xff09;在使用的组件内先导入再注册#xff0c;最后使用
4.使用方式#xff1a;
当成html标签使用即可 组件名
只能在注册的组件内使用
2.实现效果 3.步骤
创建.vue文件三个组成部分在使用的组件内先导入再注册最后使用
4.使用方式
当成html标签使用即可 组件名/组件名
5.注意
组件名规范 — 大驼峰命名法 如 HmHeader
6.语法 // 导入需要注册的组件
import 组件对象 from .vue文件路径
import HmHeader from ./components/HmHeaderexport default { // 局部注册components: {组件名: 组件对象,HmHeader:HmHeaer,HmHeader}
}7.代码
templatediv classhm-header我是hm-header/div
/templatescript
export default {}
/scriptstyle
.hm-header {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #8064a2;color: white;
}
/styletemplatediv classhm-main我是hm-main/div
/templatescript
export default {}
/scriptstyle
.hm-main {height: 400px;line-height: 400px;text-align: center;font-size: 30px;background-color: #f79646;color: white;margin: 20px 0;
}
/styletemplatediv classhm-footer我是hm-footer/div
/templatescript
export default {}
/scriptstyle
.hm-footer {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #4f81bd;color: white;
}
/style7.总结
A组件内部注册的局部组件能在B组件使用吗局部注册组件的步骤是什么使用组件时 应该按照什么命名法
普通组件的注册使用-全局注册
1.特点
全局注册的组件在项目的任何组件中都能使用
2.步骤
创建.vue组件三个组成部分main.js中进行全局注册
3.使用方式
当成HTML标签直接使用 组件名/组件名 4.注意
组件名规范 — 大驼峰命名法 如 HmHeader
5.语法
Vue.component(‘组件名’, 组件对象)
例
// 导入需要全局注册的组件
import HmButton from ./components/HmButton
Vue.component(HmButton, HmButton)6.练习
在以下3个局部组件中是展示一个通用按钮 templatebutton classhm-button通用按钮/button
/templatescript
export default {}
/scriptstyle
.hm-button {height: 50px;line-height: 50px;padding: 0 20px;background-color: #3bae56;border-radius: 5px;color: white;border: none;vertical-align: middle;cursor: pointer;
}
/style7.总结
1.全局注册组件应该在哪个文件中注册以及语法是什么
2.全局组件在项目中的任何一个组件中可不可以使用
