Vue组件入门（非单文件组件）
前言
本博客是对以下视频教程做的一个笔记总结，可作为参考，不喜勿喷。
以前我们开发前端都是一个个单独的HTML和CSS或者JS文件，但是这种方式导致代码的复用性不高，为了提高代码的复用性，提出了组件化开发。
一个组件当中包括了HTML代码和CSS代码，JS代码，一个组件就是一个单独的，可复用的功能模块。
1、基本使用
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本使用</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<!--3、使用组件-->
<school></school>
<hello></hello>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; //关闭Vue的生产提示
//1、创建（定义）组件
/*school组件*/
const school = Vue.extend({
template: `
<div class="demo">
<h2>学校名称：{{schoolName}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
`,
data() {
return {
schoolName: '华南理工',
};
},
methods: {
showName() {
alert(this.schoolName);
},
}
});
const hello = Vue.extend({
template: `
<div>
<h2>你好{{name}}</h2>
</div>
`,
data() {
return {
name: '猥琐',
}
}
});
//2、全局注册
Vue.component('hello', hello);
new Vue({
el: '#root',
data: {
msg: '666',
},
//2、注册组件（局部）
components: {
school,
},
});
</script>
</body>
</html>
总结
Vue中使用组件的三大步骤：
- 定义组件(创建组件)
- 注册组件
- 使用组件(写组件标签)
一、如何定义一个组件？
- 使用
Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；区别如下：el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。- 备注：使用
template可以配置组件结构。
二、如何注册组件？
-
局部注册：
- 靠
new Vue的时候传入components选项（组件名和组件一样时，可以简写成一个即可） components: {组件名: 组件}
- 靠
-
全局注册：
- 靠Vue.component(‘组件名’,组件)
三、编写（使用）组件标签：
- 使用时，实际上使用的是注册组件时的组件名，也就是标签名要和注册时的组件名对应。如：
<school></school>
2、组件嵌套
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>组件的嵌套</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root"></div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; //关闭Vue的生产提示
//定义student组件
const student = Vue.extend({
//name：指定组件名称
name: 'student',
template: `
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data() {
return {
name: '电子科技大学',
age: 18,
};
},
});
//定义school组件
const school = Vue.extend({
//name：指定组件名称
name: 'school',
//使用student组件
template: `
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<student></student>
</div>
`,
data() {
return {
name: '电子科技大学',
address: '你猜',
};
},
//注册组件（局部）
components: {
student,
},
});
//定义hello组件
const hello = Vue.extend({
template: `
<h1>{{msg}}</h1>
`,
data() {
return {
msg: "欢迎来电子科技大学学习~"
};
},
});
//定义app组件
const app = Vue.extend({
//使用hello组件和school组件
template: `
<div>
<hello></hello>
<school></school>
</div>
`,
//注册组件
components: {
hello,
school,
}
});
//创建vm
new Vue({
template: `<app></app>`,
el: '#root',
//注册组件（局部）
components: {app},
});
</script>
</html>
备注：组件在哪用，就在哪注册。
3、VueComponent
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueComponent</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<school></school>
<hello></hello>
</div>
<script>
Vue.config.productionTip = false;//关闭Vue的生产提示
//定义school组件
const school = Vue.extend({
name: 'school',
template: `
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
`,
data() {
return {
name: '电子科技大学',
address: '你猜',
};
},
methods: {
showName() {
console.log('showName', this);
},
}
});
//定义test组件
const test = Vue.extend({
template: `<span>哈哈哈</span>`,
});
//定义hello组件
const hello = Vue.extend({
template: `
<div>
<h2>{{msg}}</h2>
<test></test>
</div>
`,
data() {
return {
msg: 'hello',
};
},
//注册组件（哪里用哪里注册）
components: {
test,
}
});
const vm = new Vue({
//局部注册组件
components: {
school,
hello,
}
});
/*挂载Vue实例到root容器上*/
vm.$mount('#root');
</script>
</body>
</html>
总结
关于VueComponent：
school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。- 我们只需要写
<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象， - 即
Vue帮我们执行的：new VueComponent(options)。 - 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
- 关于
this指向：- 组件配置中
- data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象vc】。
- new Vue(options)配置中：
- data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象vm】。
- 组件配置中
VueComponent的实例对象，以后习惯简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后习惯简称vm。
4、一个重要的内置关系
Vue和VueComponent的关系。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个重要的内置关系</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<school></school>
</div>
<script>
/*//回顾原型
function Demo() {
this.a = 1;
this.b = 2;
}
//创建一个Demo的实例对象（回顾原型）
var demo = new Demo();
console.log(Demo.prototype); //显式原型属性
console.log(demo.__proto__); //隐式原型对象
console.log(Demo.prototype === demo.__proto__);
//程序员往构造函数的原型对象上放一个x属性，值为55
Demo.prototype.x = 55;
//程序在执行时，往实例对象的原型对象（__proto__）中查找
console.log(demo.x);*/
Vue.config.productionTip = false;
Vue.prototype.x = 55; //往Vue的原型对象上加x属性，值为55
//定义school组件
const school = Vue.extend({
name: 'school',
template: `<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showX">点我输出x</button>
</div>`,
data() {
return {
name: '电子科技大学',
address: '你猜',
}
},
methods: {
showX() {
console.log(this.x);
}
}
});
//创建一个vm
const vm = new Vue({
el: '#root',
data: {
msg: '你好',
},
//注册组件（局部）
components: {school}
});
</script>
</body>
</html>
总结
如下图：
实例的隐式原型属性，永远指向自己缔造者的原型对象。
根据以上总结：Vue实例对象上有的属性，VueComponent实例对象上也有，原因是：图上黄色原型链不是直接指向Object实例对象，而是改变指向Vue的原型对象。
Vue实例对象（vm）管理着多个VueComponent实例对象（vc）。
683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
