Vue组件相关记录

Vue组件开发

非单文件组件

创建组件api Vue.extend({})

    const student = Vue.extend({template: `<div>{{studentName}} - {{age}}</div>`,data() {return {studentName: 'jjking',age: 12}}})new Vue({el: '#app',//局部注册components: {student: student}})

不能使用el,因为按理来说,组件不应该固定挂载谁,
并且data返回的是函数,不能写成对象

局部注册
在components里边

使用就是用<student></student>

全局注册
Vue.component('student',student);
前面是组件名,后面是组件

注意事项
组件名相关问题

组件名在开发者工具中,都是首字母大写的

一个单词组成: 大小写都可以
school
School

但是组件注册的时候写什么名字,你的标签就得写什么名字,避免出错

局部注册
多个单词组成：
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

其他,我们可以使用name来指定开发者工具里边的呈现的名字,所以只是为了好看,我么实际用还是用注册用的名字

关于组件的本质

school组件的本质是VueComponent的构造函数,每次vm会帮助我们创建一个全新的VueComponent,但是这样的工作不用我们程序员干
关于this的指向
(1) 在组件中,this指向组件实例对象
(2) 在vm中,指向的是Vue实例对象

一个重要的内置关系

在这里插入图片描述

vc的prototype.__proto__ 指向的是Vue的原型对象

也就是vc可以访问到Vue原型对象上的属性和方法

换个意思讲,如果我们在Vue的原型对象上写了一个属性,我们在vc中可以拿得到

单文件组件

默认来看，生成一个vue组件是
const a = Vue.extend({options})

但是我们写单文件组件的时候

<template><div><h2>学校名称： {{name}}</h2><h2>学校地址： {{address}}</h2></div>
</template><script>
export default {name: 'School',data() {return {name: '光景',address: '白云区'}}
} 
</script><style></style>