vue的学习曲线不是很陡（相比其它框架，如anglarjs），官方文档比较全面，分为基础篇和高级篇。我们刚开始学习的时候，肯定像引用jquery那样，先把vue的js引进来，然后学习基础内容。如果仅仅停留在基础内容，没有学习vue组件的话，我觉得也就没有什么意思了。vue的核心思想——组件，是一个很好的东西，它提供了功能复用。
1、单文件组件
所谓单文件组件，顾名思义，一个vue格式的文件就是一个组件。好比python和js的模块，文件即模块。vue组件带有自己的模板，可以理解为视图，也带有自己数据及逻辑。数据可以从外部来，通过Prop接收。用图形表示：
由此可见，单文件组件就是一个完整而独立的体系。注意，style有个属性scope表示仅作用于当前组件。wpf当中的控件，有自己的xaml（视图），逻辑，可以外部绑定数据源。我觉得vue组件类似wpf中的用户控件。因为用户控件组合了基础的控件，比如Button、TextBlock等等。用户控件可直接当成一个独立的组件使用。它和vue组件一样，都是从外部获取特定的信息，然后构建自己内部的数据以及逻辑。其实组件体现的是面向对象中的“封装”思想。
2、动态组件&异步加载
有时候读了官方的文档，还是不明白，这时候就需要上网搜搜相关资料。好比《圣经》或者《道德经》中的经文是需要慢慢揣摩和体会的。当然vue的动态组件、以及组件的异步加载也是需要在实践当中慢慢体会的。下来分享一个我在项目中使用的例子：
在后台管理页面中，编辑、增加一条信息，这时候需要在弹出页面中操作。因此，我就封装了一个弹出模态框（带有遮罩效果）的组件。而编辑页面是另外的一个组件。所以，需要把编辑页面的组件“送到”弹出框的组件中呈现。有点像“装饰器模式”，不要原生态地呈现编辑组件，而是把它包装一番，再呈现，如下图：
后台管理中像这样的编辑页面非常多，所以弹出框组件的意义就在这，复用。我上面说了需要把“编辑软件资源”的组件，送到弹出框组件显示。如何送呢？其实也不难。我把这个组件作为弹框组件的子组件。那么这个弹框组件有很多个编辑组件。现在问题来了，如何控制它们显示？当我点击“编辑软件资源”的时候，弹出对应的页面，当我点击编辑新闻的时候，它要弹出新闻的页面，难道我要控制组件的显示隐藏吗？这个情况有点像“Tab”，任何时候，只能呈现一个TabItem，那么其它的只能隐藏掉。好了，我们也可以这么做。还有另外一个问题，我们如何导入这些组件，一次性import多个组件，貌似也没有什么问题。这会不会影响页面加载的性能呢？我想肯定会。
我想到了秦腔中的“变脸”，对，这个很有意思，一个人通过变脸可以扮演多个人。和演员一样，比如最近的一个电视剧中景甜扮演了“奉剑”和“千湄”两个角色。vue里面的动态组件就是如此，一个组件总是“扮演”各种组件。异步加载，当我需要用你的时候，再去import，这显然是合理的。说了这么多，我们看看代码：
<template>
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container" :style="{width:width,height:height}"> <div class="modal-header">
<slot name="header">
{{title}}
</slot>
<button class="modal-default-button" @click="close">
X
</button>
</div> <div class="modal-body" :style="{height:bodyHeight,width:bodyWidth}">
<slot name="body">
<component :is="currentComponent" @close="close" :id="id"></component>
</slot>
</div> </div>
</div>
</div>
</transition>
</template> <style scoped>
.modal-mask {
position: fixed;
z-index: 9998;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transform: translateX(-50%) translateY(-50%);
transition: opacity .3s ease;
} .modal-wrapper {
display: table-cell;
vertical-align: middle;
} .modal-container {
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
} .modal-header h3 {
margin-top: 0;
color: #42b983;
} .modal-body {
margin: 10px 0;
overflow-y: auto
} .modal-default-button {
float: right;
background: none;
border: none;
cursor: pointer;
} /*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/ .modal-enter {
opacity: 0;
} .modal-leave-active {
opacity: 0;
} .modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style> <script>
export default {
props: {
title: {
type: String
},
width: {
type: String,
required: false,
default: '30%'
},
height: {
type: String,
required: false,
default: '65%'
}, currentComponent: {
type: String,
required: true
},
id: {
type: Number,
default: 0
}
},
components: {
newsItem(resolve) {
require(['../Admin/newsItem'], resolve)
},
softwareItem(resolve) {
require(['../Admin/softwareItem'], resolve)
}
},
data() {
return {
bodyHeight: '98%',
bodyWidth: '100%'
}
},
methods: {
close(type) {
if (type)
this.$emit('close', type);
else
this.$emit('close');
}
}
}
</script>
Props中接收 currentComponent，要呈现哪个组件，交给调用方，谁调用我，谁就必须告诉我，该显示哪个子组件。3、组件通信 组件间通信问题，是一个普遍问题。组件再独立也得和其它组件协同完成任务吧。没有一个组件能完成所有事情。常见的那就父子之间的通信以及兄弟之间的通信。有没有父组件引发了一个事件，由子组件来处理呢？貌似没有。如果有的话，就是父组件更改了Props中属性的值。如果子组件非要在更改值
的时候，作出某些处理的话，那么就用Watch了。
props: [“pageIndex”, “pageSize”, “total”, “groups”, “skin”],
watch: {
total(val, oldVal) {
if (val != oldVal) {
this.render();
}
},
}
这个watch监视的是total（总页数），是分页组件监视Props中的total，一旦total改变，那么分页组件需要render，调用render方法重新渲染自己。
子组件触发事件，父组件监听，这是非常常见的。比如弹出框组件中的关闭事件，分页组件中的 pageHandler 分页事件，这些都要父组件来处理，子组件通过 $emit，这是vue全局的方法，哪个组件都可以用。父组件必须监听pageHandler事件：
<ym-pager v-if="total" :page-index="pageIndex" :page-size='pageSize' :total='total' :groups="5" @pageHandler="loadData"></ym-pager>
兄弟之间的通信，如何解决呢？网上一搜，基本上都是给一个总线级别的组件，这个组件就是用来通讯的，谁需要发布事件，就往这里发，谁需要处理，那么就监听相关事件。理论上可以实现，但是我在实践的过程中，始终没有成功，不知道为什么。还有一种思路，
通过vuex实现，事件发布方，更改vuex中的某个状态值，那么监控方发现这个状态有变化的时候，就去处理事件。vuex是一个集中式的状态管理器。“天下有变，则命一上将将荆州之军以向宛、洛。。。。。。”，《隆中对》反映了蜀汉对天下大势要密切监视，一旦
发生了变化，就要采取行动了。兄弟之间的通信，我们项目还真没有用到过，如果需要的同学，可进一步查阅资料，这里仅探讨思路。
4、slot
这个特别有用，也有意思。插槽，它反映了一种IOC（控制反转）的思想。本来子组件的呈现由自己做决定，可是某些情况下，子组件的某一部分变数很大，需要抽象出来，就用了slot先占着，等父组件调用的时候，再告诉该如何渲染。比如我们有一个table组件，这个组件实现了分页等功能。可是table的表头和表的内容充满着变数，若是由父组件通过Props传递，也可以，就是特别麻烦，传递的东西太多了，而且子组件这边也需要很多处理。大道至简，用slot，简洁。table组件不用那么费劲。调用table的父组件也不用想着如何更好地传递数据了。
<table class="ym-table table-hover">
<slot name="thead"></slot>
<slot name="tbody"></slot>
</table>
table组件中定义了两个命名slot，看看如何调用：
<YmTable :page-title="pageTitle" :total="totalCount" :page-size="pageSize" @pager="pager" @newItem="newItem">
<thead slot="thead">
<tr>
<th>序号</th>
<th>软件名称</th>
<th>简介</th>
</tr>
</thead>
<tbody slot="tbody">
<tr v-for="(item,index) in items" :key="item.id">
<td v-text="getIndex(index)"></td>
<td>
{{item.name}}
</td>
<td>
{{item.summary}}
</td>
</tr>
</tbody> </YmTable>
5、vue生命周期
生命周期是个老生常谈的问题。是个对象，那就总有个生命周期吧。比如.net中Page对象，页面的生命周期，而且这个还是主考官特别爱考的问题。Android的中Activity的生命周期。Page和Activity对象的功能有点像，提供用户操作的界面，可以简单地理解为UI。
网上最著名的就是这张图：
这个图，我们大致理解一下，它核心就是如何把VM（虚拟的dom）转换为实际dom，而且在什么时候转换。这里有一点记住就行了，Created的时候，dom还没有被渲染出来，此时不宜操作dom相关的事情。Mounted的时候，做的事情就多了。比如，在mounted的时候，通过layui绑定form的提交事件。
mounted() {
let that = this; var form = layui.form; //绑定form提交事件 layui.form.on('submit(*)', function (data) { that.summit(); return false;
});
},
再例如，封装了一个Select的组件，在updated的时候，执行select的render：
updated() {
layui.form.render('select');
},
总之，vue生命周期中,都会留有钩子函数，通过这些才能把我们的业务逻辑注入到Vue对象中，而且得到执行。我们做一件事情，要看准时机，如果时机不对，事倍功半，甚至一败涂地。诸葛亮出山的时机不对啊。6、实例变量 && $nextTick 文档中是这么说的：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用这个方法，获取更新后的DOM。很抽象啊，不理解。但是我需要它。我封装了一个YmRichText组件，这个组件里是调用了kindeditor，富文本框。
mounted() {
let that = this;
this.$nextTick(function () {
that.kedit('textarea[name="content"]');
}); },
methods: {
getConent() {
return editor.html();
},
kedit(k) {
let that = this;
window.editor = KindEditor.create(k, {
width: '98%',
height: that.height + 'px',
uploadJson: that.uploadFileUrl,
allowFileManager: false
}); } }
当在mounted的时候，不管怎么样创建的editor对象都为空。所以使用了$nextTick。按理说，不应该啊，模板中有textarea，kindeditor的js和css也加载上了，而且也在mounted的时候调用的。但是反过来想，在$nextTick调用成功，说明在当前周期内，是不会调用kindeditor的方法的。我们的分页组件中，也使用了 $nextTick，这个倒好理解，因为在created时候，调用render，render方法中会操作dom，所以只能等下一个周期执行了。
created() {
this.render();
},
watch: {
total(val, oldVal) {
if (val != oldVal) {
this.render();
}
},
pageIndex(val) {
this.cindex = val;
if (val == 1) {
this.render();
}
}
},
methods: {
render() {
let self = this;
this.$nextTick(function () {
layui.laypage.render({
elem: self.pagerId,
skin: self.cskin,
count: self.total, //总数数
limit: self.pageSize, //每页显示条数
groups: self.cgroups, //连续显示分页数
curr: this.cindex, //当前页
jump: function (obj, first) {
if (!first) self.$emit("pageHandler", obj.curr);
}
});
});
}
}
实例变量多了，比如引用父组件的$parent,引用子组件的$refs，$refs特别有用，比如要执行子组件里的方法或者获取子组件的数据。
<ym-company-select :oldCompanyId="oldCompanyId" ref="company"></ym-company-select>
this.data.companyId = this.$refs.company.companyId;
以上，就是我探讨的vue组件开发的一些问题。
