1、基本使用
Vue中使用组件的三大步骤:
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)
一、如何定义一个组件?
使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样, 但也有点区别
区别如下:
1.e1不要写,为什么? -最终 所有的组件都要经过一个vm的管 理,由vm中的e1决定服务哪个容器
2. data必须写成函数,为什么? _避 免组件被复用时,数据存在引用关系。
备注:使用template 可以配置组件结构。
二、如何注册组件?
1.局部注册:靠new Vue的时候传入components选项
2.全局注册:靠Vue.component('组件名’,组件)
三、编写组件标签:
<school></school>
<body>
<div id="root">
<!-- 第三步:编写组件标签 -->
<xuexiao></xuexiao>
<hr>
<!-- 第三步:编写组件标签 -->
<xuesheng></xuesheng>
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
// 第一步:创建
// 创建school组件
const school = Vue.extend({
template:`
<div>
<h2>学校名称:{{schoolName}}</h2>
<h2>学校地址:{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
`,
// el:"#root",// 组件定义时 不用
data(){
return {
schoolName:'尚硅谷',
address:'北京',
}
}
})
// 创建student组件
const student = Vue.extend({
template:`
<div>
<h2>学生姓名:{{studentName}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
`,
// el:"#root",
// 组件定义时 不用
data(){
return {
studentName:'张三',
age:18
}
}
})
// 创建hello组件
const hello = Vue.extend({
template:`
<div>
<h2>你好啊!{{name}}</h2>
</div>
`,
data(){
return {
name:'Tom'
}
}
})
// 第二步:全局注册组件
Vue.component('hello',hello)
// 创建vm
new Vue({
el:"#root",
// 第二步:注册组件(局部注册)
components:{
xuexiao:school,
xuesheng:student
},
methods:{
showName(){
alert(this.schoolName)
}
}
})
</script>
</body>
2、几个注意点
几个注意点:
1.关于组件名:
一个单词组成:
第一种写法(首字母小写): school
第二种写法(首字母大写): School
多个单词组成:
第一种写法(kebab-case命名): my-school
第二种写法(CamelCase命名): MySchool ( 需要Vue脚手架支持)
备注:
(1).组件名尽可能回避HTML中已有的元素名称,例如: h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签:
第种写法: <school></school>
第二种写法: <school/>
备注:不用使用脚手架时,<schoo1/>会导致后续组件不能渲染。
3.一个简写方式:
const school = Vue . extend(options)可简写为: const school = options
<body>
<div id="root">
<h1>{{msg}}</h1>
<school></school>
<!-- 自闭和脚手架模式下 -->
<school/>
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
// 定义组件
const s = Vue.extend({
name:'atguigu',
template:`
<div>
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
`,
data(){
return {
name:'尚硅谷',
address:'北京'
}
}
})
new Vue({
el:'#root',
data:{
msg:'欢迎学习Vue'
},
// 注册组件
components:{
school:s
}
})
</script>
</body>
3、组件嵌套
<body>
<div id="root">
<!-- <app></app> -->
</div>
<script>
//阻止vue在启动时生成生产提示
Vue.config.productionTip = false;
// 定义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>
<school></school>
<hello></hello>
</div>
`,
components:{
school,
hello
}
})
// 创建vm
new Vue({
template:`
<app></app>
`,
el:"#root",
// 局部注册组件
components:{
app
}
})
</script>
</body>
4、VueComponent
关于VueComponent:
1. school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue. extend生成的。
2.我们只需要写<school/>或<school></school>, Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的: new VueComponent(options)。
3.特别注意:每次调用Vue. extend,返回的都是一个全新的VueComponent!!!
4.关于this指向:
(1) .组件配置中:
data函数、methods中 的函数、watch中 的函数、computed中 的函数它们的this均是[VueComponent实例对象]
(2) .new Vue()配置中:
data函数、methods中 的函数、watch中 的函数、computed中的函数它们的this均是[Vue实例对象]。
5. VueComponent的实例对象,以后简称vc (也可称之为:组件实例对象)。
Vue的实例对象,以后简称vm。
5、一个重要的内置组件
1.一个重要的内置关系: VueComponent.prototype.__proto__ === Vue.prototype
2.为什么要有这个关系:让组件实例对象(vc)可以访问到Vue原型上的属性、方法。