十四、注册组件的基本步骤
一、步骤
1.1、创建组件构造器
1.2、注册组件
1.3、使用组件
二、代码使用步骤：
2.1. 调用 Vue.extend() 方法 创建组件构造器
2.2. 调用 Vue.component() 方法 注册组件
2.3. 在 Vue 实例的作用范围内使用组件
三、步骤解析
3.1 Vue.extend() :
- 调用Vue.extend()创建的是一个组件构造器。
- 通常在创建组件构造器时,传入template代表我们自定义组件的模板。
- 该模板就是在使用到组件的地方,要显示的HTML代码。
- 事实上,这种写法在Vue2.x的文档中几乎已经看不到了,它会直接使用下面我们会讲到的语法糖,但是在很多资料还是会提到这种方式,而且这种方式是学习后面方式的基础。
3.2.Vue.component():
- 调用Vue.component()是将刚才的组件构造器注册为一个组件,并且给它起一个组件的标签名称。
- 所以需要传递两个参数:1、注网组件的标签名2、组件构造器
- 组件必须挂载在某个Vue实例下,否则它不会生效。
四、代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 3.使用组件 -->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script>
//ES6 字符串语法 `` 可以进行换行
// 1. 创建组件构造器对象
const cpnC = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容，哈哈哈哈</p>
<p>我是内容，呵呵呵呵呵呵</p>
</div>`
});
// 2. 注册组件
// Vue.component('组件的标签名',构造器对象)
Vue.component('my-cpn',cpnC)
const app = new Vue({
el: "#app",
data: {
message: "Hellow World"
}
});
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现