组件
非单文件组件
组件的定义
向外提供一个局部的效果功能的代码集合（html/css/js/image....）
作用：复用代码，简化项目编码 提高运行效率
组件的创建
分为创建组件，注册组件，使用组件
-
创建组件
//创建school组件
const school = Vue.extend({
template:`
<div>
<h2>名称：{{schoolName}}</h2>
<h2>地址：{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
`,
data(){
return{
schoolName:'中南大学',
address:'changsha',
}
},
methods:{
showName(){
alert(this.schoolName)
}
}
})
template中是html项目
data和methods和正常vue中一样
剩余组件创建：
//创建student组件
const student = Vue.extend({
template:`
<div>
<h2>姓名：{{studentName}}</h2>
<h2>年龄：{{age}}</h2>
</div>
`,
data(){
return{
age:18,
studentName:'张三'
}
}
})
//创建hello组件
const hello = Vue.extend({
template:`
<div>
<h2>hello {{name}}</h2>
</div>
`,
data(){
return{
name:'Tom'
}
}
})
-
注册组件
注册全局组件
//注册全局组件
Vue.component('hello',hello)
vm中注册组件
//创建vm
new Vue({
el:'#root',
components:{
//注册组件（局部注册）
//组件名，引用位置
school,
student
}
})
-
使用组件标签
<div id="root">
<school></school>
<hr>
<student></student>
<hello></hello>
</div>
-
总结
<!--
vue使用组件的三大步骤
1.定义组件
2.注册组件
3.使用组件
1.如何定义组件
使用Vue.extend（options）创建，其中options和new Vue（options）中几乎一样
区别如下：
1.el不要写，所有组件都要经过一个vm进行管理，由vm中的el决定使用服务哪个
2.data必须写成函数，避免组件被复用时，数据存在引用关系
备注：使用template可以配置组件结构
2.如何注册组件
1.局部注册：new vue时传入components选项
2.全局注册：vue.component（'组件名',组件位置）
3.编写组件标签
<组件名></组件名>
<school></school>
-->
注意点
<!--
1.关于组件名：
一个单词组成：
首字母小写：school
首字母大写：School
多个单词组成：
kebab-case命名：my-school
CameCase命名：MySchool（需要vue脚手架支撑）
备注：
1.组件名尽可能回避html中已有的元素名称
2.可以使用name配置项指定组件在开发者工具中呈现的名字
2.关于组件标签
<my-school></my-school>
<school/>
备注：不使用脚手架时，<school/>会导致后续组件不能渲染
3.简写方式：
const school = Vue.extend(options)可简写为：const school = options
-->
组件的嵌套
通常我们会设置一个app组件作为组件的汇总，其余组件在app中注册，app在vue中注册，进行一个嵌套。
如果有组件的嵌套也可以分层
//创建student组件
const student = Vue.extend({
template:`
<div>
<h2>姓名：{{studentName}}</h2>
<h2>年龄：{{age}}</h2>
</div>
`,
data(){
return{
age:18,
studentName:'张三'
}
}
})
school中嵌套student组件
//创建school组件
const school = {
template:`
<div>
<h2>名称：{{schoolName}}</h2>
<h2>地址：{{address}}</h2>
<student></student>
</div>
`,
data(){
return{
schoolName:'中南大学',
address:'changsha',
}
},
components: {
student
}
}
//创建hello组件
const hello = Vue.extend({
template:`
<div>
<h2>hello {{name}}</h2>
</div>
`,
data(){
return{
name:'Tom'
}
}
})
app组件中汇总所有组件信息，其中student已经在school中注册
最后在vue中注册app组件
//创建app组件
const app ={
template:`
<div>
<hello></hello>
<school></school>
</div>
`,
components:{
school,
hello
}
}
new Vue({
el:'#root',
components:{
//命名
app
}
})
并在html中显示app，其余组件都可以正常显示
<div id="root">
<app></app>
</div>
关于VueComponent
<!--
关于vuecomponent：
1.school组件本质是一个名为vuecomponent的构造函数，且不是程序员定义的，是vue.extends生成的
2.我们只需要写<school></school>或者<school/>，vue解析时会帮我们创建school组件的实例对象
vue帮我们执行的：new vuecomponent（options）
3.每次调用vue.extend，返回的都是一个全新的vuecomponent
4.关于this指向
1.组件配置中：
data，methods，watch等this均是vuecomponent实例对象
2.new Vue（）中
data，methods，watch等this均是vue实例对象
5.vuecomponent的实例对象简称vc
vue实例对象简称vm
-->
内置关系
console.log(school.prototype.__proto__ === Vue.prototype)
over
标签：school,Vue,const,app,非单,day71,组件,data From： https://www.cnblogs.com/GUGUZIZI/p/17108226.html