与全局组件相对应的一个组件,我们把它叫做局部组件。‍‍我们看一看,如果我想使用一个局部组件,我该怎么去定义怎么去使用,我们这么来写,‍‍

猿创征文 | 组件的定义及复用性,局部组件和全局组件(2)_复用

我们定义一个对象叫做counter等于一个对象,‍‍
实际上 counter变量它就是一个局部组件,我定义了局部组件,我现在想直接去用局部组件能用吗?‍‍

我们看一下counter我直接去用它,

猿创征文 | 组件的定义及复用性,局部组件和全局组件(2)_前端_02

因为你定义了一个常量或者变量在这【24-31行代码】,它是一个局部组件,然后你在你的Vue的应用里面想去用局部组件,‍‍这是用不了的,因为ta感知不到局部组件的存在,局部组件不像全局组件一样,‍‍直接会挂到这个APP上面去,它就是一个常量,APP并不知道它存在,‍‍所以这个时候如果你想使用局部组件的话,你要怎么去使用?

猿创征文 | 组件的定义及复用性,局部组件和全局组件(2)_复用_03

假设我现在再把compontents 注释掉,然后再刷新,你发现它不好用,‍‍
只有我通过components这样的一个语法把它写在这里,才能去使用 counter组件。‍‍

猿创征文 | 组件的定义及复用性,局部组件和全局组件(2)_映射关系_04

这句话的意思是我现在创建一个Vue的应用,‍‍然后我去创建Vue的应用的根组件,这根组件里它会使用到一些局部组件,这些局部组件是谁?‍‍

局部组件里面有一个名字叫做counter的组件,它具体使用哪一个组件,用的是你上面定义的局部组件【16-22行代码】,‍‍

你要用怎么去用组件的组件名,而后面的局部组件真正指的是哪一个?‍‍
或者我可以这么去写一下,比如说我叫一个dell,‍‍

猿创征文 | 组件的定义及复用性,局部组件和全局组件(2)_复用_05

意思就是我在我的父组件里面想要去使用counter组件的时候,我通过dell这个名字去使用,‍‍但是使用的组件它真正对应的组件是谁?是counter组件。‍‍

那么如果你写成dell的话,这块你就要也通过dell的方式在父子这里去用组件:

猿创征文 | 组件的定义及复用性,局部组件和全局组件(2)_复用_06

一般来说我们如果‍‍它的k值和它的value都是一样的,我可以直接写这样:

猿创征文 | 组件的定义及复用性,局部组件和全局组件(2)_前端_07

这就是局部组件定义和使用的方式。‍‍

首先怎么定义?
定义一个常量就可以了,它是一个对象。怎么用它?
在父组件里面,首先通过components去声明它,‍‍声明之后你在你的模板里就可以直接去用了。

我们再写一个例子,const hello World 等于 hello world就好。

猿创征文 | 组件的定义及复用性,局部组件和全局组件(2)_前端_08

然后我要去用它怎么用?
在这里面局部组件我是没法直接用的,我得去注册一下。‍‍

猿创征文 | 组件的定义及复用性,局部组件和全局组件(2)_前端_09

我们之前定义全局组件的时候,肯定是通过‍‍ app.component的方式来定义的,我们起全局组件名字的时候,一般叫做hello-world这样的‍‍用横杠间隔的这样的方式去起名,

但是怎么到上面我定义局部组件的是 通过这样的方式驼峰式的方式去命名了:

猿创征文 | 组件的定义及复用性,局部组件和全局组件(2)_映射关系_10

因为如果你想定义局部组件也可以定义成hello-world的方式,
但是你的 js 语法里不支持横线作为变量的名字,‍‍所以这块就没法这么命名了,你只能去命成刚才我们写的驼峰‍‍这样的写法,但是如果你命名成驼峰,这种写法又和普通的‍‍ js的变量其实没有任何的区别,所以如果你定义局部组件的时候,建议大家把首字母都大写。‍‍

猿创征文 | 组件的定义及复用性,局部组件和全局组件(2)_前端_11

当我们再在Vue里面看到这种大写字母开头的变量的时候,我们就知道实际上它应该就是一个‍‍局部组件了,

但是如果上面的局部组件的名字变了,你在下面应用里面想去使用局部组件应该怎么办?‍‍
是不是上面这块如果你想使用小写的counter去用组件,你要做一个映射,我们映射的是counter局部组件‍‍变量:

猿创征文 | 组件的定义及复用性,局部组件和全局组件(2)_复用_12

而如果你想用hello world的话,我对应的应该是HelloWorld的组件:

猿创征文 | 组件的定义及复用性,局部组件和全局组件(2)_复用_13

它的意思就是‍‍我去创建一个Vue的实例,我要用两个子组件,它的名字分别叫做counter和hello world,‍‍ counter到哪里去找?
ta去找 c开头大写的 Counter局部组件,‍‍而hello-world这个标签对应的组件到哪里去找?
ta会去找‍‍ hello world H大写开头的局部组件,然后去做一些映射转化。‍‍

我们自己把这个名字和组件的映射关系写在了这里【33-34行代码】,‍‍实际上你不写Vue自动也会帮我们干这件事情,比如说这里你空着,

猿创征文 | 组件的定义及复用性,局部组件和全局组件(2)_前端_14

你只要把Counter大写的组件写在这儿,‍‍然后HelloWorld大写的组件写在这,

猿创征文 | 组件的定义及复用性,局部组件和全局组件(2)_javascript_15

Vue发现你使用counter的时候,它也会自动的映射到Counter组件上,‍‍发现你用hello-world小写的字符串,然后用横线间隔,Vue也会自动的把这个标签和‍‍HelloWorld这样大写字母,然后驼峰式命名的这种组件做自动的映射。‍‍
最终代码:

猿创征文 | 组件的定义及复用性,局部组件和全局组件(2)_映射关系_16

我们不用显示的做这种映射,它会自动的在底层帮我们做这种转化。‍‍

局部组件 ,定义了,要注册之后‍‍才能使用,性能比较高,因为你不用的时候,它压根就是一个变量,不会被放到任何地方,‍‍使用起来有些麻烦。‍‍

全局组件名字,建议‍‍小写字母单词中间用横线间隔,而局部组件‍‍建议大写字母开头,驼峰式命。‍‍

局部组件使用时要做一个名字和组件间的映射对象,‍‍你不写映射 Vue 底层也会自动尝试帮你‍‍做映射。

我们定义的组件是页面上的一部分,组件具有一定的复用性,
全局组件怎么定义,通过app.component来定义,‍‍ta的名字一般是couter-parent这样的形式,ta只要注册了,‍‍在父组件里,在其他任何组件里都可以直接去使用,所以它的性能并不是特别的高,但是它使用起来特别的简单。‍‍

局部组件,它其实就是一个‍‍常量,这个常量一般我们会以大写字母开头做一个区分,‍‍局部组件它要使用的话,必须在父组件里面去做一个注册,通过components来注册,‍‍ components里面要写一个名字和组件的映射关系,你建议去显示的写,当然你不显示的写,‍‍其实当你用这种小写字母标签的时候,Vue底层也会做一个映射的转换,‍‍把它转换成这种大写字母开头 驼峰式的,‍‍代码也会自动的能够正常的执行成功。