开发过html的人都知道,其实我们界面是由一个个div的布局来显示出来,每一个div里都有对应的展示内容,如果我们把这一个个div想象成一个整体,整体中又可以嵌套一个整体,最后我们界面就会变成一个个小模块组成。
Vue组件开发就是这个模式,先定义一个个组件(相当于一个div),组件可以嵌套,然后组成一个整体
。
如下图: 通常一个应用会以一棵嵌套的组件树的形式来组织:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vJk7T308-1612834014926)(vue笔记2_files/1.jpg)]
1.3 组件的好处
可复用
低耦合
2.1 创建组件的第一种方式:
使用Vue.component
创建一个组件
-
第一个参数是组件的名称(就是我们后续使用的元素标识)
-
第二个参数是对象,里面有很多参数,现在只说一个template(模板),就是我们存放展示内容的地方
Vue.component(‘component1’,{
template::`
hello
我的第一个组件
`
});
2.2 创建组件的第二种方式:
在Vue实例里注册,先定义好对象,然后在实例的components属性上把组件注册
//创建组件2 先定义好对象,然后在实例的components属性上把组件注册
const componentA ={
template:`
我的第二个组件 Hi
`
}
const app = new Vue({
el:“#app”,
data: {
number: 0
},
components:{
‘compontent2’:componentA
}
})
2.3 使用组件
1)怎么使用Vue的创建组件?
在创建组件的时候,我们都是有定义一个标志,如果是使用Vue.component创建就是第一个参数
,如果是在components注册就是对象的名称
2)使用(直接用标识名称来使用组件)
组件的使用必须在Vue实例的div里,超出的实例,vue无法管理就无法使用这个组件了
3.1 为什么要用使用分离写法?
我们知道组件的展示内容是在属性template定义好的
,然后会发现div的内容都直接在对象里面写,如果简单的内容还是可以的,但是实际的开发,肯定是比较复杂是功能,如果直接写在对象里就有点不好维护
,也不好理解代码。如果把这个template对应的div放出来,那我们组件对象就好维护很好
3.2 怎么分离元素
有一个元素标签template就可以办到分离写法,在定义好,定义好id,然后在对象里用’#id’就可以了
hhhhhhhhhhh
Vue.component(“component3”,{
template: ‘#component3’
});
4.1 什么是全局组件?
全局组件:只要是用Vue.component 来创建的组件都是全局注册的
。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中,局部组件和子组件都能使用。
比如你实例了两个new Vue(),这个全局组件就可以在这两个实例上都可以使用。(但是我们一般不会创建两个实例)
下面代码说明,我创建了全局组件,在两个实例app和app1都可以使用
我的第一个组件
4.2 什么是局部组件?
局部组件: 在实例的属性components
或者是组件里的属性components
上注册组件,叫局部组件
,局部注册的组件在其子组件中不可用
,如果要使用需要多重嵌套。
用下面的代码说明:在实例中只用component2组件,不能使用component1,因为component1没有在实例上注册
我的第一个组件
我的第二个组件
demo: