From cb3949e2ede220f747d6c908456512a45493e461 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Mon, 18 Jun 2018 15:15:26 +0800 Subject: [PATCH] =?UTF-8?q?Vue.js=202.x:=E7=BB=84=E4=BB=B6=E7=9A=84?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=92=8C=E6=B3=A8=E5=86=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 21-Vue基础/05-Vue组件.md | 774 +++++++++++++++++++++++ 21-Vue基础/{04-Vue组件.md => Vue组件.md} | 216 ------- 2 files changed, 774 insertions(+), 216 deletions(-) create mode 100644 21-Vue基础/05-Vue组件.md rename 21-Vue基础/{04-Vue组件.md => Vue组件.md} (70%) diff --git a/21-Vue基础/05-Vue组件.md b/21-Vue基础/05-Vue组件.md new file mode 100644 index 0000000..93b02f3 --- /dev/null +++ b/21-Vue基础/05-Vue组件.md @@ -0,0 +1,774 @@ + +> 本文最初发表于[博客园](https://www.cnblogs.com/smyhvae/p/9195261.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 + +> 以下是正文。 + +## 前言 + +### 什么是组件 + +**组件**： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。 + + +### 模块化和组件化的区别 + +- 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一 + +- 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用 + + +## 全局组件的定义和注册 + +组件`Component`是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。 + +全局组件的定义和注册有三种方式，我们接下来讲一讲。 + +### 写法一 + +写法一：使用Vue.extend方法定义组件，使用 Vue.component方法注册组件。 + +代码举例： + +```html + + + + + + + + Document + + + + +
+ + +
+ + + + + +``` + +上方代码中，在注册组件时，第一个参数是标签名，第二个参数是组件的定义。 + +运行结果如下： + +![](http://img.smyhvae.com/20180422_2230.png) + +代码截图如下： + +![](http://img.smyhvae.com/20180422_2223.png) + +上图中，注意两点： + +**注意1**、红框部分，要保证二者的名字是一致的。如果在注册时，组件的名称是**驼峰命名**，比如： + +```javascript +Vue.component('myComponent', myAccount); //第一个参数是组件的名称（标签名），第二个参数是模板对象 +``` + +那么，在标签中使用组件时，需要把大写的驼峰改为小写的字母，同时两个单词之间使用`-`进行连接： + +```html + + +``` + + +`Vue.component('my')` + +**注意2**、绿框部分，一定要用一个大的根元素（例如`
`）包裹起来。如果我写成下面这样，就没有预期的效果： + +``` + template: '

登录页面

注册页面

' +``` + +结果如下：（并非预期的效果） + +![](http://img.smyhvae.com/20180422_2232.png) + +### 写法二 + +写法二：Vue.component方法定义、注册组件（一步到位）。 + +代码如下： + +```html + + + + + + + + Document + + + + +
+ +
+ + + + + +``` + +代码截图如下： + +![](http://img.smyhvae.com/20180422_2251.png) + +上图中，同样注意两点： + +1、红框部分，要保证二者的名字是一致的。 + +2、绿框部分，一定要用一个大的根元素（例如`
`）包裹起来。如果我写成下面这样，就没有预期的效果： + +``` + template: '

登录页面

注册页面

' +``` + +结果如下：（并非预期的效果） + +![](http://img.smyhvae.com/20180422_2232.png) + + +### 写法三 + +> 上面的写法一、写法二并不是很智能，因为在定义模板的时候，没有智能提示和高亮，容易出错。我们不妨来看看写法三。 + +写法三：将组件内容定义到template标签中去。 + +代码如下： + +```html + + + + + + + + Document + + + + + + + +
+ + +
+ + + + + +``` + +代码截图如下： + +![](http://img.smyhvae.com/20180422_2256.png) + +写法三其实和方法二差不多，无非是把绿框部分的内容，单独放在了`