手把手教你玩转Vue.js组件(一)

  1. 云栖社区>
  2. 博客>
  3. 正文

手把手教你玩转Vue.js组件(一)

前端王睿 2018-01-16 12:26:00 浏览1258
展开阅读全文

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

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

网友评论

登录后评论
0/500
评论
前端王睿
+ 关注