vue 组件2 非单文件组件（组件的创建,注册使用）

要点：

 

组件分为：非单文件组件和单文件组件

非单文件组件就是一个文件里面有n个组件 n>1

单文件组件：

一个文件中就只有一个组件,并且是vue创建的 ，这一个组件也就是一个文件

一般外卖开发时,多用单文件组件

毕竟单文件组件里面只有一个vue实例

小案例：

解决命名重复

一、

二、用驼峰命名解决推荐，层级没有那么多拆组件压力没有那么大

把这两个拆分成两个组件

 

1.创建组件

const 组件名=Vue.extend({

}) 

这里面内容和我们之前在vue实例里写的几乎是一样什么计算属性、监视等等

但是这边是几乎,还是有不同的

如果直接复制前面vue实例写的

发现报错,报错：只有你写new Vue的时候才能写el的配置项 

组件为什么不用写为谁服务？

因为,组件就像一块砖哪里缺了往哪搬,不需要明确为谁服务

真正要写el的就是vm,因为vm是在所有组件之上的大哥说打哪就打哪,el是在vm上决定的,不是组件决定的

所以我们把el注释掉,发现又报了一个错

报错：要把data写成一个方法,不能像之前那样写成对象的格式

要写出data(){

        return()

}

之前我们说过

vue实例用的data有两种写法一种对象式,一种函数式

而且在组件中只能使用函数式

为什么只能写成函数式？

因为当有两个引用了该组件,都引用了其中的schoolName 如果用对象的形式,则当这两个其中一个修改了schoolName的值,则另一个也会跟着改变,因为用对象方式,把数据同步了,不符合组件的要求

用一些通俗的代码来解释：

用对象形式写：
 

会发生一个联代的关系

 

 如果用函数形式写

 

就没有联代了

因为你每次调用会给你一个对象

比如会给x1一个对象也会给x2一个对象

然后我们把小案例代码改成函数形式,由于这边创建的是学校组件,所以只要写学校的属性即可

发现不报错,问题解决

同理把学生的组件也写好

2.注册组件

在vm上写el对应的容器

并配置一个components:{

        组件名:key

}

这个key就是前面定义的组件的变量,这边定义的组件名,才是组件的名字

两个相同可以用组件

 这边我们用不同注册

 再写其中的html结构

用我们之前学过的用template对象,加字符串的形式写html结构

到这边我们的vue组件才真正有意义 

 

3.使用

只要在body里写对应组件名,的组件标签就行了

发现页面成功显示了

在vm上也可以加对象,并不是写了组件就不能写vm上的data对象了

root中是vm上有没有对应数据

 

 

验证一个组件被使用多次数据是不干扰的

写两个学生组件标签

 

发现没有干扰,就是写了函数式

增加功能

在学校组件中加入一个按钮点击提示学校

在template=··里直接写注意要在外边用div包裹,这边看到写上去全是绿色,不好编译,这也是为什么大多数开发都是使用单文件组件的写法

实现功能

 

局部注册和全局注册

前面都是局部注册

如果在别的容器中,使用局部组件就会报错

 

解决方法一、

在root2对应vm上引入组件

 

解决方法二、使用全局组件写法

比如我们这边加了一个新的组件hello

第一个参数为组件名,第二个为定义名 这样写,所有vm都不需要在components里写hello组件

就可以在body中div容器里写入它的组件标签而且不会报错成功运行

 

但一般来说局部注册用的多

 

总结：