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>
export的时候，是直接抛出一个{}也就是一个对象，这里是简写的形式
const a = options
在app页面中，我们导入一个组件的时候，他会自动识别
