在我们开发的过程中会遇到很多可以重复使用的代码块,而Vue则提供了这样的封装方式也就是Vue.component

它里Vue模块的一种声明方式,也相当于一个小的Vue文件,它也有类似真正的Vue文件一样的生命周期,比如说
created、methods、computed、mounted...这样的

Vue.component('mybutton',{
    template:"<div><p>姓名:</p><p>from:</p></div>" //需要在tepmlate里面写HTML代码
})

  调用的时候只需要像普通的HTML标签一样使用即可

<mybutton></mybutton>

当然如果我们想要开发一个组件的话,那么它里面的值,一定会是动态的,Vue.component也可以通过props传值的方式进行接收动态传递过来的参数,然后通过{{}}(双大括号这种赋值方式)传递到HTML元素中

Vue.component('div-name', {
    template:"<div><p>姓名:{{names}}</p><p>from:{{froms}}</p></div>",
    props:['names','froms']
})

实现效果:


Vue.component支持事件派发

如果我们项目中有很多地方需要用到相同类型的按钮,但它们处理的逻辑又不完全相同,我们可以用Vue.component来创建一个组件(齿轮)出来,通过Vue的事件派发来处理不同的逻辑,同理:如果按钮上面的文字又不尽相同,我们则需要用到props父子组件传值的方式进行动态的改变与赋值不同的值

创建:

Vue.component('my-button',{
    template:"<div class ='box'><Button @click='res' type='primary' style='margin-right:10px;'>{{options.resName}}</Button><Button @click='err'>{{options.err}}</Button></div>",
    props:{
        options:{
            type:Object,
            default(){
                return {
                    resName:'修改',
                    err:'取消'    
                }
            }
        }
    },
    methods: {
        res(){
            this.$emit('save')  // 通过事件派发$emit()向父组件派发事件,父组件监听到这个事件,就会执行对应的操作
        },
        err(){
            this.$emit("back")
        }
    }
})

 使用组件:

 <my-button :options ='option' @save='saveChange' @back='backChange'></my-button>

使用效果:

这样就可以把这个小小的组件封装起来重复使用(再也不怕要改Button的样式了!!!)


差点忘记说还有这个模块还需要在main.js里面注册一下,建议常用的组件使用这种方式进行封装,不然会影响项目的启动速度

 

import compon from "@/pluging/component"  //你的文件地址

 

Logo

前往低代码交流专区

更多推荐