Vue组件学习

217 阅读1分钟
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