Vue组件

组件定义：

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。

一、Vue组件分为两种：

1.全局组件

注意问题：全局组件一定要在Vue实例化之前创建

例：

 Vue.component("my-comp", {//全局组件一定要在Vue实例化之前创建            template:"<h1>这是一个自定义组件的模板内容</h1>"        });     var vm = new Vue({           data:{}        }).$mount("#app");

2.局部组件

局部组件，其实就是一个JSON对象

生成一个局部组件的方法：

2.1. 定义局部组件

2.2. 在实例中注册局部组件

例：

 var UsersList = {            template:"<h2>这是一个局部组件，展示用户列表信息</h2>"        }var vm = new Vue({            /*在实例中注册一个局部组件*/            components:{                "users-list":UsersList            }        }).$mount("#app");

二、组件中的数据：

组件可以有自己的数据 ，组件自己的数据定义在data选项中，data选项的对应的是一个【函数对象】，注意必须是函数对象。

var data = { counter: 0 }Vue.component('simple-counter', {  template: '<button v-on:click="counter += 1">{{ counter }}</button>',  // 技术上 data 的确是一个函数了，因此 Vue 不会警告，  // 但是我们返回给每个组件的实例的却引用了同一个data对象  data: function () {    return data//由于data是一个地址，每次调用组件时，data对应的函数返回的都是相同的地址，因此这三个组件的数据就会同步变化。  }})new Vue({  el: '#example-2'})

上面的实例，由于这三个组件共享了同一个 data ， 因此增加一个 counter 会影响所有组件！这不对。我们可以通过为每个组件返回全新的 data 对象来解决这个问题：

data: function () {  return {    counter: 0//每次调用组件,组件中的data函数都会被调用一次，由于data对应的是一个函数，因此，每次调用它时，返回的counter都有自己的内部状态(地址空间)，因此这三个counter之间的数据不会相互影响  }}现在每个 counter 都有它自己内部的状态了：

三、父子组件之间传递数据的方法：

Vue中父子组件之间传递数据的强制单向性：即
        >>> 允许父组件通过自定义属性给子组件传递数据
        >>> 禁止子组件中直接修改父组件中的数据
解决这种单向性约束的方法：

父组件通过 props 向下传递数据给子组件，子组件通过events(自定义事件) 给父组件发送数据。

通过组件的自定义属性，将组件外部的数据传递给组件自己，这样子组建就可以父组件中的数据了。
    自定义属性，通过props进行配置

自定义属性
        通过props选项进行配置
        项目中最常用的配置方式如下
        props: {
            属性名称: {
                type:属性值的数据类型,//都有哪些数据类型
        通常有String, Number, Boolean, Function, Object, 

例：

Vue.component("welcome", {            /*props:["username"],properties 组件的自定义属性*/            props:{/*使用props定义组件的自定义属性，下面的定义方式，是项目中最常用的方式*/              username:{/*定义了一个自定义属性名称*/                  type:String,/* type选项 设置这个自定义属性接收到数据的类型，也就是说设置了自定义属性的属性值的数据类型，因此如果接收到的外部数据和type中设置的类型不同时，浏览器会报错，但数据依然可以正常显示 */                  default:function() {/*default选项，设置了这个属性的默认值 */                      return "游客"                  }              },                       template:"<div><h2>尊敬的用户{{username}}，欢迎访问系统，您的等级是{{level}}</h2>\            <input type='text' v-model='username'/></div>"        });        var vm = new Vue({            el:"#app",            data: {                parentName: "jerry"            }        });

Array
                default:function() {
                    return 属性的默认值;
                }
            }
        }

我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回

去，应该怎样做？那就是自定义事件！