Vue局部组件的封装与使用

Vue局部组件的封装与使用

在项目或者开发的过程中，我们可能会在一个页面或模块中遇到一个重复使用的模块(组件)，但是这个重复使用的组件在其他页面又没有使用到，这个时候我们可以使用Vue的局部引用模块的方法。
也就是类似于Vue.component的写法，这种方式，不过我们是在页面内直接写模块，也可以把这个写成单独的JS进行引用，这种局部引用的好处在于它不用新建一个.vue文件只需要像JS代码一样写在JS文件里面
例：
比如我们在一个页面中需要使用多次多选框，而这种时候我们重复的去复制粘贴，无疑加大了代码量，在这种情况下我们就可以把这种多选框封装成为一个专属页面的一个组件
我们先看一下成品的效果：
使用：

<checkboxs :listMap="list" :checkList="checked" @selectChange='selectChanges'></checkboxs>

渲染效果：

接下来我们看一下这个组件是如何封装的，这个组件的封装过程类似于Vue.component的封装方式，不过它是需要写在页面里面的component里面的
啰嗦了这么多，先放全部代码吧（复制可用）

"checkboxs": {
  template:
    "<div>" +
    "<CheckboxGroup v-model='arr' @on-change='checkAllGroupChange'>" +
    "<Checkbox v-for='item,index in listMap' :key='index' :label='item.id'>{{ item.name }}</Checkbox>" +
    "</CheckboxGroup>" +
    "</div>",
    props: {
      listMap: {
        type: Array,
        default: []
      },
      checkList: {
        type: Array,
        default: []
      }
    },
  data() {
    return {
        arr:[]
    }
  },
  created(){
    this.arr = this.checkList
    //这里把传入的选中列表,重新赋值的原因是组件内部无法直接去更改父组件的属性,所以这里把传入的值，保存到了组件内部，当发生改变的时候再给父组件传回去，
  },
  methods: {
    checkAllGroupChange(i) {
      this.$emit("selectChange",i)
      //局部组件的传入方式与普通组件没有太大区别也都是通过$emit()向父组件发送事件，父组件通过v:bind的方式监听这个事件，获取组件的状态
    }
  }
},

这里使用的UI框架是iview这种局部组件写法的坏处，也就是它的样式，因为它是纯JS生成的组件，所以我们无法像.vue文件那样非常简单的去控制组件的样式，在组件内部，我们除了可以使用内联样式外，无法使用类选择器、ID选择器、及其他选择器…去控制元素的样式。
简单来说这个局部引入的东西虽说没有像那种.vue文件那样有完善的template,script,style的样式，但是它只需要一个JS文件就OK，而且一个JS文件，可以写多个类似于我们说的checkbox的组件进行抛出，看了这一篇文件后，您可以回头去看看您之前的项目，可能会发现项目中重复使用的模块（组件）很多，后期做页面重构的话就可以通过这种方式来给页面进行重构，这样也方便于样式的控制，以及逻辑的更改和代码的阅读，以及后期维护