2.4.4 this的指向
- (1).组件配置中：
- data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
- (2).new Vue(options)配置中：
- data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
<!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> </head> <body> <div id="root"> <button @click="showThis">点击打印this</button> <hr /> <school></school> </div> </body> <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> --> <script src="../js/vue.js"></script> <script> // 定义school组件 const school = Vue.extend({ name: 'School', template: ` <div> <h2>学校名: {{name}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showThis">点击打印this</button> </div> `, data() { return { name: 'SGG', address: 'Beijing', } }, methods: { showThis() { console.log('VueComponent: ', this) }, }, }) const vm = new Vue({ el: '#root', components: { school, }, methods: { showThis() { console.log('Vue: ', this) }, }, }) </script> </html>
2.5 一个重要的内置关系
只要是对象就有隐式原型属性，只要是函数就有显示原型属性，隐式原型属性永远指向对象缔造者(构造函数)的显示原型属性指向的原型对象。使用构造函数的显示原型属性向原型对象上添加属性或方法，构造出来的对象使用隐式原型属性查找添加的属性或方法。
在Vue中，VueComponent()的原型对象的原型对象为Vue()的原型对象。即组件的原型对象的原型对象为Vue()的原型对象。
VueComponent.prototype.__proto__ === Vue.prototype
Vue()为vue实例的构造函数，VueComponent()为组件实例的构造函数。
这个重要的内置关系的作用：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。这样子就不用再VueComponent的原型对象上再添加一份与Vue原型对象上相同的属性和方法。
<!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> </head> <body> <div id="root"> <school></school> </div> </body> <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> --> <script src="../js/vue.js"></script> <script> // 向Vue的原型对象上添加属性x Vue.prototype.x = 999 // 定义school组件 const school = Vue.extend({ name: 'School', template: ` <div> <h2>学校名: {{name}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showX">点击打印X</button> </div> `, data() { return { name: 'SGG', address: 'Beijing', } }, methods: { showX() { // 在组件实例对象中无x，会向VueComponent的原型对象查找 // VueComponent的原型对象也无x，会向Vue的原型对象查找 // 最终在Vue的原型对象中查找到x console.log('School x: ', this.x) }, }, }) const vm = new Vue({ el: '#root', components: { school, } }) </script> </html>
2.6 单文件组件
单文件组件：一个文件中只包含一个组件。
在单文件组件中，一个组件就是一个.vue文件。
vue组件文件的命名
使用小写单词：
- 单个单词：school.vue
- 多个单词：my-school.vue
使用首字母大写单词：(推荐)
这种写法与vue开发者工具显示的组件名一致。
- 单个单词：School.vue
- 多个单词：MySchool.vue
2.6.1 单文件组件代码的书写位置
<template> <!-- vue2中组件结构中只能有一个根节点 --> <div> <!-- 组件的结构 --> </div> </template> <script> // 组件交互相关的代码 </script> <style> /* 组件的样式 */ </style>
.vue文件中，代码高亮显示插件
安装该插件后，骨架代码快速生成：
<v + 回车
2.6.2 组件js代码的暴露
1.分别暴露
<script> export 需要暴露的方法或变量 </script>
2.统一暴露
<script> export { 需要暴露的方法或变量, ... } </script>
3.默认暴露
当暴露的东西为一个时，一般使用默认暴露，引入时直接
import xxx from xxx
<script> export default 需要暴露的方法或变量 </script>
2.6.3 组件的创建与使用
School组件：
<template> <div class="demo"> <h2>学校名: {{name}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showX">点击打印X</button> </div> </template> <script> // 由于只需要向外暴露一个VueComponent // 所以使用默认暴露 // 由于vue.extend()可以省略 // 可以直接写组件的配置对象 // 注册组件使用组件时，vue.extend()会自动调用 export default { name: 'School', data() { return { name: 'SGG', address: 'Beijing' } }, methods: { showX() { console.log('School x: ', this.x) } } } </script> <style> .demo { background-color: orange; } </style>
Student组件：
<template> <div> <h2>学生姓名：{{name}}</h2> <h2>学生年龄：{{age}}</h2> </div> </template> <script> export default { name: 'Student', data() { return { name: '张三', age: 18 } } } </script> <style> </style>
App组件：
<template> <div> <School></School> <Student></Student> </div> </template> <script> //引入组件 import School from './School.vue' import Student from './Student.vue' export default { name:'App', components:{ School, Student } } </script>
编写入口文件main.js，创建vue实例，注册App组件：
// 导入App组件 import App from './App.vue' new Vue({ el:'#root', template:`<App></App>`, components:{App}, })
编写页面，提供容器使用组件：
当前这个页面在浏览器不能正常运行，因为main.js中的import为es6语法，浏览器不支持解析es6语法。需要使用脚手架。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>练习一下单文件组件的语法</title> </head> <body> <!-- 准备一个容器 --> <div id="root"></div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript" src="./main.js"></script> </body> </html>
