Vue组件化编程
非单文件组件
一个文件中包含n个组件
const 组件名=Vue.extend
components:{
真正的组件名!:组件名 school才是真正的组件名/注册的组件名
}
注册组件
单文件组件
一个文件只包含有一个组件
组件化命名问题
一个单词全小写或者首字母大写
school
School
多个单词组成
MySchool
需要Vue脚手架支持
my-school
不要使用html中已经存在的元素名称
可以用name改变开发者工具中组件的名字
const 组件名=Vue.extend({
name:' '
})
可以使用自闭合,但是必须使用脚手架
<组件名/>
简写 可以直接写一个对象
const 组件名={ }
Vue默认执行Vue.extend
组件的嵌套
在组件中注册组件
const 组件名=Vue.extend({
name:' ',
template:`
<div>
<子组件></子组件>
</div>
`es6写法 直接可以写元素加内容
data:{return {}},
components:{
子组件名:。。。
}
})
app总组件(vm之下 所有组件之上)
const app=Vue.extend({
components:{
所有父组件!!!}
})
每次调用Vue.extend都会新建一个vc
组件中的this放到了VueComponent实例对象中
每个组件都有VueComponent
组件实例对象 称为VC
vm管理vc
组件的内置关系
vc有的vm都有 但是vm能指定对象(el) vc不行
function Demo(){
this.a=1
this.b=2
}
const d=new Demo()
Demo.prototype
显示原型属性
d.__proto__
Demo.prototype.x=99
程序员通过显示原型属性操作原型对象
VueComponent.prototype.__proto__===Vue.prototype