vue-组件化开发基础
程序员文章站
2022-06-24 12:09:42
组件化开发基础、分为三个步骤： 注册组件 使用组件 步骤解析： 1、创建组件构造器对象 Vue.extend（）创建了一个组件构造器 通常在创建组件构造器的时候，通常会传入 template 代表我们自定义组件的模板 该模板是使用组件的地方，显示的HTML代码 2、注册组件 Vue.componen ......
组件化开发基础、分为三个步骤：
- 创建组件构造器对象
-
注册组件
-
使用组件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<script src="../js/vue.js"></script>
</head>
<div id="app">
<!-- 3、使用组件 -->
<my-cpn />
</div>
<body>
<script>
// 1、创建组件构造器对象
const cnpc = vue.extend({
template: `
<div>
<h2>我是标题</h2>
<p>组件化开发的思想</p>
</div>
`
})
// 2、注册组件
vue.component('my-cpn', cnpc)
let vm = new vue({
el: '#app',
data: () => ({}),
methods: {}
})
</script>
</body>
</html>
步骤解析：
1、创建组件构造器对象
vue.extend（）创建了一个组件构造器
通常在创建组件构造器的时候，通常会传入 template 代表我们自定义组件的模板
该模板是使用组件的地方，显示的html代码
2、注册组件
vue.component()
调用vue.component() 是将刚才组件构造器 构造的组件 注册为一个组件 ，并且给它起一个标签名
所需的有两个参数：
1、标签名 2、组件构造器名
3、使用组件
<my-cpn></my-cpn> 或 <my-cpn />注：组件必须挂载到vue实例下面才有效果，即#app 里面
上一篇： vue---v-model的详细解答
下一篇： Elasticsearch