浅谈Vue组件化开发思想及定义，基础篇，献给Vue小白的礼物！！！

【码牛云课堂】浅谈Vue组件化开发思想及定义，基础篇，献给Vue小白的礼物！！!

本帖是作者学习Vue组件化开发时的笔记，当时对Vue组件化进行了系统的学习，期待各位大牛的指正，如果你也是小白，同样对Vue情绪高涨，欢迎添加作者的老师微信：
码牛云课堂Java霸牛老师（微信）：mnykt8080；

还有许多讨论Vue的小伙伴在这里交流：

​ 码牛云Java技术交流QQ群：1142264605；

好啦，废话不多说，Let’s Go! Rush Vue冲冲冲！

1 组件化开发的思想

1.1 组件化开发定义

​ 标准、分治、重用、组合；

​ 标准：开发有统一的标准；

​ 分治：把不同功能封装至不同的组件中；

​ 重用：替换不可用的组件；

​ 组合：将不同组件组合成一体，形成新的产品；

1.2 组件化思想体现

1.3 组件化规范

​ 问题：希望重用代码，自定义组件不易，多次使用组件导致冲突；

​ Web Components 规范

​ 通过创建封装好功能的定制元素解决上述问题；

​ Vue 部分实现了Web Components 规范

2 组件的注册方式

2.1 全局组件

2.1.1 注册语法

Vue.component('组件名称',{
	data:'组件数据',
	template:'组件模板内容'
});

2.1.2 用法

例子：定义一个 button-counter的新组件：

写入html中：

2.1.3 注意事项

​ <1> data 必须是一个函数；

​ <2> 组件不能有兄弟关系，必须是单个根元素；

​ <3> 组件模板内容可以是模板字符串；

​ 模板字符串是 ES6 的语法：

​ <4> 组件命名方式：

​ 短横线方式：my-component；

​ 驼峰方式：MyComponent，驼峰方式无法在模板字符串中使用 ；

2.2 局部组件

2.2.1 注册

2.2.2 使用

​ 与全局一致；

2.2.3 注意事项

​ 局部组件只能注册在他的父组件中使用；

3 组件间数据交互方式

3.1 父组件向子组件传值

3.1.1 组件内部通过props接收传递过来的值

3.1.2 props属性值类型

string类型：

props中：

props:['pstr']

template中：

<div>{{ pstr }}</div>

页面中组件内加：pstr=‘pstr’

int类型：

props:['pnum']

template中：

<div>{{ pnum}}</div>

页面中组件内加：pstr=‘12’
​

boolean类型：

props:['pboolean']

template中：

<div>{{ pboolean}}</div>

页面中组件内加：pboolean=true

数组类型：

parr:['wang',['li'],['zhang']]
props:['parr']

template中：

<ul>
	<li :key='index' v-for='(item.index) in parr'>{{ item }}</li>
</ul>

页面中组件内加：parr=‘parr’

​

对象类型：

pobj:{
	name='zhang san',
	age=23
}
props:['pobj']

template中：

<div>
	<span>{{ pobj.name }}</span>
	<span>{{ pobj.age }}</span>
</div>

页面中组件内加：pobj=‘pobj’

3.2 子组件向父组件传值

props 传递数据的原则：单向数据传递；

3.2.1 子组件通过自定义事件向父组件传递信息

​ 在子组件template中加入：

​ 父组件监听子组件的事件

<menu-item v-on:enlarge-text='fontSize +=0.1'></menu-item>

3.2.2 子组件通过自定义事件向父组件传递信息

​ 在子组件template中加入：

​ 父组件监听子组件事件：

3.3 非父子组件间传值

3.3.1 事件中心

​ 实践中心用来管理组件间的通信；

​ 组件A、B通过事件中心来相互传递数据；

​ 实现事件中心：

var event = new Vue();

3.3.2 监听事件与销毁事件

event.$on('add-todo',add-todo);
event.$off('add-todo');

3.3.3 触发事件

event.$emit('add-todo',id);

4 组件插槽

4.1 组件插槽的作用

4.2 组件插槽的基本用法

4.2.1 插槽位置

​ 插槽使用 来表示：

Vue.component('alert-box',{
	template:`
		<div>
			<strong>错误！</strong>
			<slot></slot>
		</div>
	`
});

4.2.2 插槽内容

<alert-box>出现错误咯！</alert-box>

4.3 具名插槽用法

4.3.1 插槽定义

4.3.2 插槽内容

可以使用 < template> < /template> 标签来进行多条数据填充，且此标签不会渲染到页面上；

4.4 作用域插槽

​ 应用场景：父组件对子组件的内容进行加工处理；

​ slot-scope

4.3.1 插槽定义

<ul>
	<li v-for="item in list" v-bind:key="item.id">
		<slot v-bind:item="item">
			{{ item.name }}
		</slot>
	</li>
</ul>

4.3.2 插槽内容

<f-list v-bind:list="list">
	<template slot-scope="slotProps">
		<strong v-if:"slotProps.item.current">
			{{ slotProps.item.text }}
		</strong>
	</template>
</f-list>

5 Vue调试工具

安装：

​ 克隆仓库

​ 安装依赖包（npm insatll 在vue-devtools目录中）

​ 构建（npm run build）

​ 打开chrome扩展页面

​ 选中开发者模式

​ 加载已解压的扩展，选择shells/chrome

po出了这么多，相信各位对Vue的组件化开发是否有了初步的了解呢，要记得多多练习来消化一下哟。练习中遇到困难无法解决？或是想要更深层次的了解Vue？来，面对面大牛为你解答疑惑：

​ 码牛云课堂Java霸牛老师（微信）：mnykt8080；

​ 或者加入：

​ 码牛云Java技术交流QQ群：1142264605；

​ 和小伙伴们一起探讨，一起进步！想要获得后续资料，持续关注码牛云吧各位亲，下次更新我们不见不散！！！