手把手教你玩转Vue.js组件（一）

在阅读本文之前，请先确认你是否满足以下几个要求：

① 有一定的前端基础
② 掌握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组件的讲解可能还不够细致，不够深入，示例也相对比较简单，如有不足之处希望大家评论指出。谢谢！