1、认识组件化

我们将一个完整的页面分成很多个组件，每个组件都用于实现页面的一个功能块，而每一个组件又可以进行细分。

组件化是Vuejs中的重要思想，它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用，任何的应用都会被抽象成一颗组件树。

组件化思想的应用使我们在开发中尽可能的将页面拆分成一个个小的、可复用的组件，让我们的代码更加方便组织和管理，并且扩展性也更强。

2、注册组件的基本步骤

组件的使用分成三个步骤：
1、创建组件构造器
2、注册组件
3、使用组件

基本使用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--3、使用组件--><my-cpn></my-cpn><my-cpn></my-cpn>
</div><script src="../js/vue.js"></script>
<script>//1、创建组件构造器对象const cpnC = Vue.extend({template: `<div><h2>我是标题</h2><p>我是内容1</p><p>我是内容2</p></div>`})//2、注册组件Vue.component('my-cpn',cpnC)const app = new Vue({el: '#app'})
</script>
</body>
</html>

注册组件步骤解析

1、Vue.extend()：
调用Vue.extend()创建的是一个组件构造器。
通常在创建组件构造器时，传入template代表我们自定义组件的模板。该模板就是在使用到组件的地方，要显示的HTML代码。

2、Vue.component():
调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
所以需要传递两个参数：
1、注册组件的标签名。2、组件构造器。

3、组件必须挂载在某个Vue实例下，否则它不会生效。

全局组件和局部组件

上述举的代码案例是全局组件，那么什么是全局组件和局部组件呢？

全局组件在任何vue管理的容器中都可以使用，但是局部组件只有在指定被管理的容器中才能够使用。

<body>
<div id="app"><cpn></cpn><cpn></cpn><cpn></cpn>
</div>
<div id="app2"><cpn></cpn>
</div>
<script src="../js/vue.js"></script>
<script>//1.创建组件构造器const cpnC = Vue.extend({template:   `<div><h2>我是标题</h2><p>我是内容</p></div>`})//2.注册组件(全局组件,意味着可以在多个Vue的实例下面使用)// Vue.component('cpn',cpnC)const app = new Vue({el: '#app',})const app2 = new Vue({el: '#app2',//局部组件components: {cpn: cpnC}})
</script>
</body>

局部组件是直接挂载在指定vue下面。

注册组件语法糖

在上述注册组件的方式，可能会有些繁琐，Vue为了简化这个过程，提供了注册的语法糖，主要是省去了调用Vue.extend()的步骤，而是可以直接使用一个对象来替代。

components: {cpn1: {template: `<div><h2>标题1</h2><p>内容1</p></div> `}}

3、父组件和子组件

在组件和组件之间存在层级关系，而其中非常重要的关系就是父子组件的关系

<script>//1、创建第一个组件构造器const cpnC1 = Vue.extend({template: `<div><h2>标题1</h2><p>内容1</p></div>`})//1、创建第二个组件构造器const cpnC2 = Vue.extend({template: `<div><h2>标题2</h2><p>内容2</p><cpn1></cpn1></div>`,components: {cpn1: cpnC1}})const app = new Vue({el: '#app',data: {message: '你好啊',},components: {cpn2: cpnC2}})
</script>

其中，cpnC2是cpnC1的父组件，子组件注册在父组件中。

组件不可以直接访问Vue实例中的数据

组件是一个单独功能模块的封装，这个模块有属于自己的HTML模块，也应该有属于自己的数据data。

组件对象也有一个data属性（也可以有methods等属性），只是这个data属性必须是一个函数，而且这个函数返回一个对象，对象内部保存着数据。

4、父子组件通信

子组件是不能引用父组件或者Vue实例的数据的。但是，在开发中，往往一些数据确实需要从上层传递到下层：
比如在一个页面中，我们从服务器请求到了很多数据，其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。这个时候，并不会让子组件再次发送一个网络请求，而是直接让父组件将数据传递给子组件。

如何进行父子组件间的通信呢？Vue官方提到：
1、通过props向子组件传递数据
2、通过事件向父组件发送消息

父级向子级传递

在组件中，使用选项props来声明需要从父级接收到的数据。
props的值有两种方式：
方式一：字符串数组，数组中的字符串就是传递时的名称。
方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

当需要对props进行类型等验证时，就需要对象写法。
验证都支持以下数据类型：

String
Number
Boolean
Array
Object
Date
Function
Symbol

子级向父级传递

当子组件需要向父组件传递数据时，就要用到自定义事件了，之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件。

自定义事件的流程：

在子组件中，通过$emit()来触发事件
在父组件中，通过v-on来监听子组件事件

父子组件的访问方式：$children

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件。

父组件访问子组件：使用$children
父组件访问子组件：使用$refs
子组件访问父组件：使用$parent

父访问子

$children使用:

<body>
<div id="app"><cpn></cpn><button @click="btnClick">按钮</button>
</div><template id="cpn"><div>我是子组件</div>
</template>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',},methods: {btnClick() {console.log(this.$children);this.$children[0].showMessage();}},components: {cpn: {template: '#cpn',methods: {showMessage() {console.log('showMessage');}}}}})
</script>
</body>

$refs使用：

<body>
<div id="app"><cpn></cpn><cpn ref="aaa"></cpn><button @click="btnClick">按钮</button>
</div><template id="cpn"><div>我是子组件</div>
</template>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',},methods: {btnClick() {console.log(this.$refs.aaa.name);}},components: {cpn: {template: '#cpn',data() {return {name: '我是子组件的name'  }},methods: {showMessage() {console.log('showMessage');}}}}})
</script>
</body>

$refs是一个对象类型，默认是一个空的对象

子访问父

$parent使用：

<body>
<div id="app"><cpn></cpn>
</div><template id="cpn"><div><h2>我是cpn组件</h2><ccpn></ccpn></div>
</template>
<template id="ccpn"><div><h2>我是子组件</h2><button @click="btnClick">按钮</button></div>
</template>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',},components: {cpn: {template: '#cpn',data() {return {name: '我是cpn组件的name'}},components: {ccpn: {template: '#ccpn',methods: {btnClick() {console.log(this.$parent);console.log(this.$parent.name);}}}}},}})
</script>
</body>

$root使用：

<body>
<div id="app"><cpn></cpn>
</div><template id="cpn"><div><h2>我是cpn组件</h2><ccpn></ccpn></div>
</template>
<template id="ccpn"><div><h2>我是子组件</h2><button @click="btnClick">按钮</button></div>
</template>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',},components: {cpn: {template: '#cpn',data() {return {name: '我是cpn组件的name'}},components: {ccpn: {template: '#ccpn',methods: {btnClick() {console.log(this.$root);console.log(this.$root.message);}}}}},}})
</script>
</body>

第三天：Vue的组件化相关推荐

利用webpack和vue实现组件化
原文链接:http://mrzhang123.github.io/2016/06/02/webpack-vue-3/ 本文基于vue1.x 基于vue2.x&webpack2.x请移步至 Vu ...
Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
vue使用组件化思想实现一个简单的购物车页面
vue使用组件化思想实现一个简单的购物车页面文章目录 vue使用组件化思想实现一个简单的购物车页面页面预览项目结构组件介绍主页面ShopCar Header组件 Goods组件 Count组 ...
Vue——Vue的组件化
Vue--邂逅Vue Vue--Vue的基础语法 Vue--Vue的组件化 Vue--slot_插槽的基本使用文章目录 1:组件化的介绍和使用 2:组件步骤解析 3:全局组件和局部组件 4:父组件和 ...
VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...
Vue.js 组件化开发
三.组件化开发 1.1 组件化的实现和使用步骤组件注册步骤解析 1.2 全局组件和局部组件 1.3 父组件和子组件 1.4 注册组件语法糖 1.5 组件模板抽离的写法 1.6 组件数据存放 1.7 ...
Vue/React组件化开发的一些思考
组件化开发的优势组件化开发利用了面向对象的威力,易于构建规模比较大的应用并且获得比较高的可维护性,可扩展性.Vue.React厂商及社区不但提供了组件化开发的框架,而且提供了易于起步并包含了从编码. ...
Vue（组件化编程：非单文件组件、单文件组件）
一.组件化编程 1. 对比传统编写与组件化编程(下面两个解释图对比可以直观了解) 传统组件编写:不同的HTML引入不同的样式和行为文件组件方式编写:组件单独,复用率高(前提组件拆分十分细致) 理解为 ...
vue的组件化+父子组件的通信
文章目录 1.注册组件的基本步骤 1.1 原始的创建方法 1.2语法糖创建方法 2.全局组件与局部组件 2.1 全局组件 2.2 局部组件 2.3语法糖局部组件(最简写法) 3. 父子组件 4.组件中 ...

第三天：Vue的组件化