对组件的理解

非单文件组件

定义：一个文件中包含有多个组件

单文件组件：一个文件中只包含有一个组件。

我们先写一个简单的例子，我们不用组件的话：

 

我们页面中的这两个部分我们就可以分成两个组件来写。

 用组件改写后：

 

前端页面效果是和之前一样的：

 

如果我们想添加一些新的功能就可以直接在对应的组件的模板上去写就可以了：

 

我们直接在组件的模板中加入button元素就可以了，然后加上正常的方法：

 

 

我们可以在多个div中去使用多个组件（不同的vm对象中可以使用不同的组件）：

我们现在去使用一下全局的组件（用的相对少）：

 

我们在body部分增加了一个挂载区域。

 

 

我们的vue中只有这一个挂载，没有组件。

 

我们正常的去创建了一个组件。

我们这时候开始使用全局组件：

 

 

挂载区域可以直接使用标签。

运行：

 

我们可以把全局组件放在任何挂载区域，我们把它放在第二个区域：

 

 

总结：

 Vue中使用组件的三大步骤:

一.定义组件（创建组件）

二 注册组件

三 使用组件（写组件标签）

一、如何定义一个组件？

使用Vue.extend(options)创建，其中options和new Vue（options）时传入的那个options几乎一样，但区别如下：

1.el不要写，为什么？-最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器

2.data必须写成函数，为什么？-避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构。

二 如何注册组件？

1.局部注册：靠new Vue的时候传入components选项

2.全局注册：靠Vue.component('组件名',组件)

三  编写组件标签

<school></school>

组件的几个注意点

我们写个简单的用组件的代码案例：

 

 

我们这个组件创建的是school给它起的名字也是school，所以我们可以简写成：

 

而且名称比较推荐的是首字母大写。

如果z组件名称是多个单词，官方推荐的第一种写法：

改个名字。

 

 

这种写法，多单词我们一定要加单引号：

我们可以看到开发者工具自动解析成这种形式了。

还有一个需要注意的点：

 

 

这么命名也是官方推荐的，我们看起来也没有什么不对，

运行一下：

 

报错了。这种写法是建议在脚手架创建vue项目的时候使用的，我们这种直接引入vue.js的方法是不能这么命名的。

关于组件名：

一个单词组成：

第一种写法（首字母小写）：school

第二种写法(首字母大写):School

多个单词组成:

第一种写法(kebab-case命名):my-school

第二种写法(CameCass命名):MySchool（需要vue脚手架支持） 

备注：

（1）组件名尽可能回避HTML中已有的元素名称，例如：h2,H2都不好

（2）可以使用name配置项指定组件在开发工具中呈现的名字。

我们给备注（2）举个例子：

 

我们使用和注册组件的名称都是School，我们若给组件一个name属性：

 

再去运行：

 

我们这个属性只改变开发者工具中的名称。

 2.关于组件标签：

第一种写法：<school></school>

第二种写法：<school/>

备注：不用使用脚手架时，<school/>会导致后续组件不能渲染

 

 

当我们换成单标签时：

 

 

只渲染了一个，剩下两个都失效了，所以最好还是不要这么去写。

3.一个简写方式：

const school=Vue.extend(option) 可简写为:const school=options

我们简写就不需要写Vue.extend了。

 

我们现在为了更好的了解组件的原理，我们还是写的全称，但是以后学了脚手架，我们都是用这种简写方法，怎么简单怎么来。

组件的嵌套

我们在上个代码的基础上去学习。

添加一个组件:

 

 

现在就有两个组件了。

 

但是我们这么写，可以看到这两个组件就是平级的了。

所以这样写是不叫组件的嵌套的。

 

我们可能会这样写，就是我们直接把这个组件引用到s组件中。

 

报错了，我们也能够看得懂，我们既然去引用school组件，那就应该先有这个组件，之后我们再去引用：

 

 

我们的vm中已经没有student组件了，所以我们挂载区也要去掉：

 

我们是不是也要在school组件中的模板里加上对student组件的引用：

 

 

我们可以看到这样是嵌套关系了。这也是局部嵌套。

 我们再去添加一个hello组件:

 

 如果我们想让我们的hello组件和我们的School组件平级，那很好写：

 

运行:

 

我们现在再去建立一个组件，让它在vm之下，所有组件之上的这么一个app组件，这个在开发中比较常用：

 

 

我们有了 它，我们不就可以去把之前的东西简化了么：

 

 

 

 我们也可以在body的div中什么都不写

直接在vm中写模板:

 

我们最后的这个写法就是我们以后开发中的标准写法。

 VueComponent构造函数

这一部分主要是为了深入去了解脚手架。

这里有5个需要说明的，就不用代码演示了：

关于VueComponent:

1.school组件本质是一个名为VueComponent的构造函数，且不是程序定义的，是Vue.extend生成的。

2.我们只需要写<school></school>，Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)

3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！

4.关于this指向:

(1)组件配置中:

data函数，methods中的函数,watch中的函数,computed中的函数，它们的this均是[VueComponent实例对象]

(2)new Vue(options)配置中:

data函数，methods中的函数,watch中的函数,computed中的函数，它们的this均是[Vue实例对象]

5.VueComponent的实例对象，以后简称vc(也可称之为：组件实例对象)。

Vue的实例对象，以后简称vm。

 

1.一个重要的内置关系:VueComponent.prototype._proto_===Vue.protptype

2.为什么要有这个关系:让组件实例对象(vc)可以访问到Vue原型上的属性，方法。

单文件组件

我们创建单文件组件就和之前大不一样了。

 这就是我们.vue文件，也就是单文件组件的核心结构。我们不能在里面随便乱写。

 

我们最后单文件组件这么写就可以了。

我们同理用这种方式也可以把student的组件写出来：

 

现在我们还是要用这种方法写一个非常重要的组件：app.vue去管理这两个组件：

 

我们用app.vue去管理我们的组件了。那现在没有vm对象我们要怎么去调用呢，所以我们就要去做一个去管理app.vue的东西。

在这里我们是去做一个.js文件去管理我们的App.vue：

但是我们 现在没有页面去运行，我们就去写一个html页面去给我们的这个前端项目一个打开的窗口:

我们还需要给我们的main.js加一个模板用来运行App.vue:

如果不加这句话我们就要在前端的html页面上去添加了。

然后我们就可以放心的写前端html了：

 

运行:

 

运行报错了，但是这并不是说我们的代码写的有问题。是浏览器不支持我们的import语法格式，我们这种手动的创建方法不好，页面不显示。这里只是学习整个单文件组件的过程，我们之后学习脚手架的时候，在用脚手架去创建vue项目的时候，这么写就是完全可以的了。