Vue 组件&组件之间的通信 之组件的介绍
2024-04-07 13:41:21
什么是组件？
组件Component,可扩展HTML元素，封装可重用的代码。通俗的来说，组件将可重用的HTML元素封装成为标签方便复用；
组件的使用：
1、使用全局的方法Vue.extend创建构造器；
2、再使用全局的方法Vue.component注册组件；
注意：在Vue.component里需要指明组件的名称，组件名称不能使用内置标签名称，如body.推荐使用短横线命名规则。
如：
my-component 正确 （推荐使用）
my-Component 错误
mycomponent 正确
Mycomponent 正确
myComponent 错误
MyComponent 错误
示例：
vue 代码：
<script>
window.onload= () =>{ //创建构造器
let myComponent=Vue.extend({ template:"<h1>欢迎来到perfect*的博客园</h1>"
}); //注册组件
Vue.component('my-component',myComponent); new Vue({
el:'div',
data:{ } })}
</script>
html:
<div>
<my-component></my-component> </div>
使用注册组件简写的方式：
出现的问题：
修改后的效果：
vue代码：
//注册组件的简写方式
Vue.component('my-componenta',{
template:'<h2>hello vue</h2>'
});
html:
<my-componentA></my-componentA>
html标签是大小写不分的
组件的命名不支持驼峰命名方式
最终所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>component</title>
<script type="text/javascript" src="../js/vue.js" ></script> <script>
window.onload= () =>{ //创建构造器
let myComponent=Vue.extend({ template:"<h1>欢迎来到perfect*的博客园</h1>"
}); //注册组件
Vue.component('my-component',myComponent); //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello vue</h2>'
}); new Vue({
el:'div',
data:{ } })}
</script>
</head>
<body>
<div>
<my-component></my-component>
<my-componentA></my-componentA> </div>
</body>
</html>
组件的介绍
详细介绍见官网：https://cn.vuejs.org/v2/api/#%E5%85%A8%E5%B1%80-API
最新文章
- rank()函数的使用
- [ASP.NET MVC] Real-time之HTML5 服务器发送事件（server-sent event）
- iOS动画实现改变frme和contenOffset
- 【Win10 UWP】URI Scheme（一）：Windows Store协议的解析和使用
- xhprof使用笔记(非原创)
- mplayer依赖关系不满足
- 国内HTML5前端开发框架汇总
- 解决display： inline-block； 4px间隙的全兼容做法
- W5300E01-ARM 交叉编译器(Cross Compiler)用户手册
- 使用python制作ArcGIS插件（4）界面交互
- K：java中枚举的常见用法
- Bootstrap常用表单布局
- RBAC权限管理设计
- SecureCRT连接linux步骤
- 基于DobboX的SOA服务集群搭建
- 2018.11.07 NOIP模拟 数独（模拟）
- AJPFX：什么是止盈？什么是止损？
- nginx 重写URL尾部斜杠
- Struts2不扫描jar包中的action
- jTemplates