image.png
image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件</title>
</head>
<body>
<div id="root">
<hello></hello>
<hr>
<!-- 第三步：使用组件 -->
<student></student>
<hr/>
<school></school>
<hr/>
</div>
<!-- 第二个容器 -->
<div id="root2">
<hello></hello>
</div>
<script src="../js/vue.js"></script>
<script>
//第一步：定义组件
const student = Vue.extend({
template:`
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data(){
return {
name:'丫丫',
age:2
}
}
});
const school =Vue.extend({
template:`
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
data(){
return {
name:'幼儿园',
address:'一个城市'
}
}
});
const hello =Vue.extend({
template:`<div>你好呀！</div>`,
})
//全局注册组件
Vue.component('hello',hello)
new Vue({
el:'#root',
//第二步：局部注册组件
components:{student,school}
})
new Vue({el:'#root2'})
</script>
</body>
</html>
知识点
- 模块
（1）：向外提供特定功能的js程序，一般就是一个js文件。
（2）：为什么？js文件很多很复杂。
（3）：复用js，简化js的编写，提高js的运行效率。
- 组件
（1）：用来实现局部功能的代码集合（js,css,html,image....）
（2）：为什么？一个界面的功能很复杂。
（3）：复用代码，简化项目编码，提高运行效率。
- 单文件组件
一个文件中只包含一个组件。
- 非单文件组件
一个文件中包含n个组件。
- vue中使用组件的三大步骤
1：定义组件（创建组件）
2：注册组件
3：使用组件（写个组件的标签）
- 如何定义一个组件
使用Vue.extend({options}),其中options和new Vue时传入的options几乎一样，但也有点区别：
区别如下：
（1）：el不要写，为什么？最终所有的组件都要由vm管理，服务于哪个容器由vm决定。
（2）：data必须写成函数的形式？避免组件被引用时，数据存在引用关系。
- 如何注册一个组件
（1）：局部注册：通过new Vue的components配置项。
（2）：全局注册：通过Vue.component('组件名',组件)
网友评论