Vue.components模块的使用方式

 

 

在我们开发的过程中会遇到很多可以重复使用的代码块，而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"  //你的文件地址