读vue-draggle源码（一）--- vue. component

vue-draggle是比较知名的vue组件，用于处理拖动排序。

其源码中注册组件，使用vue. component()。

一、vue. component文档

参数：组件名，配置项   （看下面例子）

二、源码中使用

可以看到draggableComponent变量中，和平时写组件配置项相同。在使用上只是换了种形式

const draggableComponent = {
  name: "draggable",  
  inheritAttrs: false,  
  props,  data,
  created(){},
  mounted(){},
  ......
}

if (typeof window !== "undefined" && "Vue" in window) {  
    window.Vue.component("draggable", draggableComponent);//参数组件名，配置项
}

export default draggableComponent;

三、在项目中使用

注册全局组件

//在main.js中
Vue.component("mytest",{  
    name:"test",//这里区别Vue.component第一个参数  
    data(){    
        return{      
            num:1    
        }  
    },    
    template:`<div>mytest组件{{num}}</div>`
})

//在任何vue文件中，可以直接使用
<mytest />