怪咖晨

自己动手封装Vue 组件

。一笑奈何 vuevue componentjavascript

    直至今日,vue、react、angular成为了前端的三剑客,从百度统计的趋势能看到vue的搜索趋势明显增多。

搜索指数概述

搜索指数趋势

    那么,在实际开发过程中,经常会遇到一些组件的封装,接下的文章中,由我来大家介绍,vue怎么去封装一个组件。

准备工作,vue环境搭建,这里不在阐述

首页封装一个组件,我们需要考虑,我们需要这个组件去做什么,它需要提供怎样的行为和动作,vue文档中指出,父组件传值给子组件可以使用props的方式进行值的传递,那么这个东西有什么用呢,字面意思理解为属性,这个被使用的组件拥有什么的样的属性。

下面我们先看一段代码:

<template>
    <div class="">
        <input ref="input" class="input" v-model="elVal" @v-bind="$props"
        @change="handleChange"
        @input="handleInput"
        @blur="handleBlur"/>
    </div>
</template>
<script>
export default {
    name: "bl-input",
    data(){
        return {
            elVal: this.value
        }
    },
    props:{
        value: true
    },
    methods:{
        handleInput(){
            /*这里很重要,负责你会发现你绑定此组件上的v-model不会有任何的变化*/
            this.$emit("input",this.elVal);
        },
        handleChange(){
            
        },
        handleBlur(event){
            /*此处event为鼠标对象*/
            console.log("我是鼠标事件");
        }
    }
}
</script>
。一笑奈何
高山仰止,景行行止。虽不能至,心向往之