从0认识 Vue组件

组件component

1、什么是组件？

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码
组件是自定义元素（对象）

2、组件的分类

根据组件定义的域不同，可以分为全局组件和局部组件。定义在全局里的组件叫全局组件，定义在局部域的叫局部组件

3. 定义组件的方式

3.1 全局组建的定义

方法一、 Vue.component(“组件名”,{选项1，选项2…})
通过 Vue.component(“组件名”,{选项1，选项2…}) 来定义组件
参数一:定义组件的名字，
参数二 {}:表示组件的内容
组件的内容里包含一些参数，如：
（1）template 表示组件模板，写的就是html代码的字符串。
（2）data 表示配置组件数据相关(和vue实例的data不一样，vue实例里的data是一个对象，而此处的data是一个function，因为我们这是封装一个组件，这个组件每用一次，它都会新实例出来一个对象，这个新实例对象就有一些新的数据，这个data function就是指定我们怎么去生成这写数据。这里return出来想要的数据。)
（3）methods 用来定义功能函数
此时定义的全局组件，可重复使用，但须注意的是相同标签组件的功能是一模一样的
定义组件：

Vue.component('alert',{
 template:'<button @click="onClick">提交</button>',
 methods:{
     onClick:function(){
         console.log('this is alert');
     }
 }
}) 

全局组件在html里的使用：

 <div id="app">
     <alert></alert>
     <alert></alert>
     <alert></alert>
     <alert></alert>
 </div>

id='app'是定义模板的挂载点，是为了告诉组件我们将在哪个地方使用。这也就是我们上文所有的域，这个域是就是我们常常写的

new Vue({
    el:'#app',
});

如果需要设置多个域，定义的格式如下：

new Vue({
    el:'#app1',
});
new Vue({
    el:'#app2',
});

使用方法和单个域的方法相同.

发现：使用Vue.component()多定义的组件，对下面定义的所有域都是可见的。但是如果我有很多的全局component，这些component都是对所有域可见的，这种感觉就像是window下的全局变量，给人的感觉特别不踏实。
有的时候，我们很确切的知道一个component只能在那一个域里面用，那么就需要定义一个局部的component

方法二、Vue.extend(options)
Vue.extend(options) Vue.extend返回的是一个“扩展实例构造器”，不是具体的组件实例，也就是预设了部分选项的Vue的实例构造器，它常常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂在到自定义元素上.

在main.js中设置：

var Profile = Vue.extend({
  template: '<button v-on:click="show=!show">切换<h1 v-show="show">全局组件的学习</h1></button>',
  data: function () {
    return {
      show: true
    }
  }
})
 Vue.component('my-component',Profile)
//Vue.component 是用来全局注册组件的方法，其作用是将通过 Vue.extend 生成的扩展实例构造器注册（命名）为一个组件

注：data在 Vue.extend()中它必须是函数。

3.2 局部组件的定义

在特定的域中使用选项components定义局部组件：
跟全局组件和相似，只不过它是在特定域中写个components。
注意：此处带有s的，全局每次定义的是一个全局组件，局部可以定义多个局部组件，所有是复数components

new Vue({
    el:'#app',
    components:{
        alert:{
            template:"<button @click='onClick'>clicke me</button>",
            methods:{
                onClick:function(){
                    alert('my first component!');
                }
            }
        }
    }
});

为了使结构更加清晰明了，我们可以将组件的功能提出来进行封装，以上代码可改为下面的：

const Alert = {
    template:"<button @click='onClick'>clicke me</button>",
    methods:{
        onClick:function(){
            alert('my first component!');
        }
    }
}

new Vue({
    el:'#app',
    components:{
        alert:Alert,
    }
});

需要注意的是，此局部组件仅仅是在el='#app'里进行了定义，就是说只能在标签id为app的里面可进行使用，而在别的标签里则不可以。即在对应域中定义的组件只能限制在该域中，所以局部限制在指定的局部域，全局组件全局可见