在阅读本文之前，请先确认你是否满足以下几个要求：
① 有一定的前端基础
② 掌握Vue.js最基本的使用（也许从未使用过组件，没关系，这正是本文所要讲的）
③ 对组件化概念有一定的了解
当然，如果你已经对Vue.js组件运用得炉火纯青，那么恭喜你，你也没有必要浪费时间阅读本文了。
接下来，本文将以具体实例讲解以下几个有关Vue.js组件的知识点：
① 如何封装一个组件
② 组件内数据的存储
③ 父组件调用执行子组件方法
一、需求
封装一个移动端常用的简单弱提示组件，如下图所示：
当提示出现后，2s之后自动消失。
二、编写全局组件
1. 语法
Vue.component( 组件名称，选项对象 )
2. 示例代码
/*CSS代码部分省略*/
//Javascript
Vue.component('pop-tips',{
data: function(){
return {
popShow: false,
popText: ''
}
},
template: '<div class="pop-tips" :class="{show: popShow}"><span>{{popText}}</span></div>',
methods: {
popTips: function(text){
var _this = this;
this.popShow = true;
this.popText = text;
setTimeout(function () {
_this.popShow = false;
},2000);
}
}
});
3. 代码解析
① pop-tips为组件名称，调用时可以直接使用<pop-tips></pop-tips>。
② 选项对象中data属性必须是函数形式，并将组件数据对象通过函数返回值形式返回。这点与Vue根实例中data不同，因为组件的主要作用是方便复用，而每个组件在调用时数据是独立的，而并不是共用的。
③ 选项对象中template属性是个字符串，其中放的是组件HTML模板内容。
④ 选项对象中methods属性是个由函数组成的对象，这与Vue根实例中的methods属性基本一致。
三、组件调用
函数定义是为了最终的执行调用，同样的，组件定义好了，我们也得知道如何去使用它。
<!--HTML-->
<article id="app">
<input type="button" value="点击学习更多前端知识" @click="showTips"/>
<!--组件调用-->
<pop-tips ref="tips"></pop-tips>
</article>
//Javascript
var vm = new Vue({
el: '#app',
methods: {
showTips: function(){
this.$refs.tips.popTips('请关注微信公众号：前端微站');
}
}
});
上面代码中this.$refs.tips获取的是pop-tips组件实例（其中tips是我们在组件调用时标签上设置的ref属性值），获取到组件实例之后我们便可以取得其中的任意数据和方法。
当然，你可能会觉得每次调用这个组件方法时写这么长一串太麻烦，没关系，我们可以再封装一个全局方法：
function popTips(text){
vm.$refs.tips.popTips(text);
}
那么上面的弱提示代码就可以写成：
popTips('请关注微信公众号：前端微站');
最终的运行效果就是，当点击“点击学习更多前端知识”这个按钮时，弹出“请关注微信公众号：前端微站”弱提示，并且弱提示在2秒后自动消失。
结束语： 本文对Vue.js组件的讲解可能还不够细致，不够深入，示例也相对比较简单，如有不足之处希望大家评论指出。谢谢！
