用传统的开发方式，代码结构混乱，比如一个页面，我们采用组件式开发，分成导航栏、顶部、内容、底部，每一个模块都具备完整的页面结构样式逻辑等。
下面这个是局部引用组件，有三个步骤：
第一步：创建组件
第二步：注册组件
第三步：使用组件
其中，我们的组件结构是用template来构建的
<!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>Document</title>
<script src="../xxx.js/vue.js"></script>
</head>
<body>
<div id="root">
<student></student>
<br>
<school></school>
</div>
</body>
<script type="text/javascript">
//1、创建school组件,,一定不要学el配置项，最终被vm管理，
const school = Vue.extend({
template: `
<div>
<h2>学校名称：{{ schoolName }}</h2>
<h2>学校地址：{{ address }}</h2>
</div>`,
// el:'#root',
data() {
return {
schoolName: '广东老公学院',
address: '肇庆',
}
}
})
//1、创建student组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名：{{ studentName }}</h2>
<h2>学生年龄：{{ age }}</h2>
</div>`,
// el:'#root',
data() {
return {
studentName: '佩奇',
age: 3
}
}
})
new Vue({
el: '#root',
//2、注册组件
components: {
school,
student
}
})
</script>
</html>当然，也可以采用全局组件的方式
<!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>Document</title>
<script src="../xxx.js/vue.js"></script>
</head>
<body>
<div id="root">
<student></student>
<br>
<school></school>
</div>
<div id="root2">
<jntm></jntm>
</div>
</body>
<script type="text/javascript">
//1、创建school组件（局部）,,一定不要学el配置项，最终被vm管理，
const school = Vue.extend({
template: `
<div>
<h2>学校名称：{{ schoolName }}</h2>
<h2>学校地址：{{ address }}</h2>
</div>`,
// el:'#root',
data() {
return {
schoolName: '广东老公学院',
address: '肇庆',
}
}
})
//1、创建student组件（局部）
const student = Vue.extend({
template: `
<div>
<h2>学生姓名：{{ studentName }}</h2>
<h2>学生年龄：{{ age }}</h2>
</div>`,
// el:'#root',
data() {
return {
studentName: '佩奇',
age: 3
}
}
})
//1、创建JNTM组件（全局）
const jntm = Vue.extend({
template:`
<div>
<h2>只因你太美{{name}}</h2>
</div>
`,
data(){
return{
name:'kunkun'
}
}
})
Vue.component('jntm',jntm)
new Vue({
el: '#root',
//2、注册组件
components: {
school,
student
}
})
new Vue({
el:'#root2'
})
</script>
</html>
我们可以看到，鲲鲲组件就是一个全局的组件
版权声明：本文为m0_58820668原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。