<!--
Vue中使用组件的三大步骤:
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)
一、如何定义
使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别;
区别如下:
1.el不要写,为什么? ——— 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。
2.data必须写成函数,为什么? ———— 避免组件被复用时,数据存在引用关系。
备注:使用template可以配置组件结构。
二、注册组件
1.局部注册:new Vue的时候传入components选项
2.全局注册:Vue.component('组件名',组件)
三、编写组件:
<school></school>
–>
<body>
<div id="root">
<h2>{{hello}}</h2>
<hr />
<!-- 3.使用组件 -->
<school></school>
<hr />
<student></student>
</div>
<div id="root2">
<!-- 全局注册过的组件 -->
<school>/school>
<hr />
<!-- 未全局注册过的组件 ,不能使用-->
<student></student>
</div>
</body>
<script text="text/javascript">
//1.创建学校组件
//关键函数extend(),html结构包含在template中
const school = Vue.extend({
template: `
<div>
<h2>学校名称:{{schoolName}}</h2>
<h2>学校名称:{{schoolAddress}}</h2>
</div>
`,
//主键由vm管理,不需要写el,data写成函数的形式
data() {
return {
schoolName: "家里蹲大学",
schoolAddress: "深渊峡谷",
};
},
});
//1.创建学生组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名:{{studentName}}</h2>
<h2>学生年龄:{{studentAge}}</h2>
</div>
`,
data() {
return {
studentName: "张三",
studentAge: 18,
};
},
});
//2.全局注册组件
Vue.component("school", school);
new Vue({
el: "#root",
data: {
hello: "哔站欢迎你",
},
//2.局部注册组件
//关键键名:components
components: {
school,
student,
},
});
new Vue({
el: "#root2",
});
</script>
</html>