Vue组件化与模块化、全局组件定义的三种方式以及私有组件的定义

组件化和模块化的区别：

什么是组件:

组建是为了拆分VUE实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

组件化和模块化的不同：

模块化：是从代码逻辑的角度进行划分的；方便代码的分层开发，保证每个功能模块的职能单一。

组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用。

 

全局组件定义的三种方式

先叨叨一下全局组件，首先，组件定义在script标签里面，其次可以不单单#app使用，作为全局组件，任意写一个实例都可以调用改全局组件。

1、使用Vue.extend配合Vue.component方法：

//1.1使用Vue.extend来创建全局Vue组件
var coml = Vue.extend({
    template:"<h3>这是使用Vue.extend创建的组件</h3>"//通过templa属性，指定了组件要展示的HTML结构
})
//1.2使用Vue.component("组建的名称"，创建出来的组件模板对象)
Vue.componet("myCom1",com1)

//如果要使用组件，直接把组件名称，以HTML标签的形式，引入到页面当中即可
<my-coml></my-coml>
//如果使用驼峰定义全局组建的时候，啧啧在引用的时候将大写驼峰改成小写，同时两个单词之间使用-连接
//如果不适用驼峰，直接拿名称使用即可

2、将对象值直接传入template。

Vue.component 第一个参数组件的名称。将来在引用组件的时候，就是一个标签 Vue.extend。第二个参数：Vue.extend 创建的组件，其中template就是组件要展示的内容。

Vue.component("mycoml",Vue.extend{
template:"
<div>
<h3>这是使用Vue.extend创建的组件</h3>"
<span>123</span>
</div>
})

 

不论是那种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只有一个根元素。

3、将template直接抽离出去，在外面设置结构。

//再被控制的#app外面，使用template元素，定义组件的HTML模板结构
<template id ="tmpl">
    <div>
    <h1>这是通过template元素，在外部定义的组件结构,有代码的智能提示</h1>
    </div>
</template>

<script>
Vue.component("mycom3",{
template:"#tmp1"
})
</script>

定义一个私有组件：

var vm2 = new Vue({
    el:"#app",
    data:{},
    methods{},
    filters{},
    components{//定义实例内部私有组件的,私有组件只能在vm2内调用
    login:{
        template:"<h1>这是私有的login组件</h1>"
            }
},     
})

同样，也可以将<h1></h1>抽离出

//抽离出的template部分
<template id="tmpl">
    <h1>这是私有的login组件</h1>
</template>

components:{//vm2中的部分
    login：{
        template:"#tnp1"
    }
}