Vue-组件
Vue 组件
一、概念
Vue基于可以重用、独立的思想，设计出组件这一概念，组件可以使程序员对每个部分进行单独设计。
如下图为组件很形象的定义
二、非单文件组件
1.组件的基础使用
<div id="root">
<student></student>
</div>
局部组件以及注册
//第一步：创建student组件
const student = Vue.extend({//此处school即为Vue创建的组件
name:'Student'，//首字母大写，约定俗成。Vue在用该组件时，会自动将首字母大写
template:``,//可以在此处写简单的模板
data(){//组件内的data，是以对象形式保存的，不可以写成数组形式
return {
name:"张三"，
age：19
}
},
methods: {
}
})
new Vue({
el:'#root',
data:{
msg:'你好啊！'
},
//第二步：注册组件（局部注册）
components:{
student
}
})
全局组件以及注册
<div id="root">
<hello></hello>
</div>
//第一步：创建hello组件
const hello = Vue.extend({
template:`
<div>
<h2>你好啊！{{name}}</h2>
</div>
`,
data(){
return {
name:'Tom'
}
}
})
//第二步：全局注册组件
Vue.component('hello',hello)
new Vue({
el:'#root2',
})
2.组件的嵌套
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//定义student组件
const student = Vue.extend({
name:'student',
template:`
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data(){
return {
name:'尚硅谷',
age:18
}
}
})
//定义school组件
const school = Vue.extend({
name:'school',
template:`
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<student></student>
</div>
`,
data(){
return {
name:'尚硅谷',
address:'北京'
}
},
//注册组件（局部）
components:{
student
}
})
//定义hello组件
const hello = Vue.extend({
template:`<h1>{{msg}}</h1>`,
data(){
return {
msg:'欢迎来到尚硅谷学习！'
}
}
})
//定义app组件
const app = Vue.extend({
template:`
<div>
<hello></hello>
<school></school>
</div>
`,
components:{
school,
hello
}
})
//创建vm
new Vue({
template:'<app></app>',
el:'#root',
//注册组件（局部）
components:{app}
})
</script>
3.重要的内置关系
VueComponent.prototype.proto === Vue.prototype