【Vue组件详细介绍】

1. Vue组件

Vue 是一套构建用户界面的渐进式框架，常用于构建单页面应用（SPAs）和交互式界面，Vue 核心重点在于视图层，但它也易于整合进现有的项目中去或者配合其它库使用，Vue 组合是框架中的关键抽象，它们允许你通过一个独立和可复用的单元为用户界面构建部件。

1.1 组件介绍

组件(Component)是Vue最强大的功能之一，
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
组件可以分为全局组件和局部组件

组件命名规则

短横线命名，如: my-component，vue推荐使用这种方式的命名规则
首字母大写命名规则，如：MyComponent

props

props是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"

1.2 局部组件

定义语法：new Vue({el:‘#d1’,components:{组件名：{配置选项}}})

<div id="app">
     <div>
         <!--title是用来传值的自定义属性，在自定义组件的props中定义 -->
         <button-counter title="测试"/>
     </div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    },

    //局部自定义组件
    components: {
    
        //组件名: {配置项}
        'button-counter':  {
            
            //用来传值的自定义属性
            props:['title'],

            //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
            template: '{{title}}：局部组件，点击计数器:{{count}}',

            //注意：在自定义的组件中需要使用函数来定义data
            data: function() {
                return {
                    count: 0
                }
            },
            
            //定义响应事件函数
            methods: {
                doClick: function() {
                    //注意此处this的作用返回是自定义组件,而不是上面声明
                    //的vue实例.
                    this.count++;
                }
            }
        }
    }
});

注：为什么在自定义组件中必须使用函数方式来什么data？
每个自定义组件使用函数方式来声明data，这样每个实例可以维护一份被返回对象的独立的拷贝，在定义自定义组件时，一定要注意这一点。

1.3 全局组件

将上面的局部组件修改为全局组件。
全局组件定义语法：Vue.component(组件名, 配置选项)

<div id="app">
    <div>
        <button-counter title="测试"/>
    </div>
</div>

//全局组件
Vue.component('button-counter', {

    //用来传值的自定义属性
    props:['title'],
    
    //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
    template: '{{title}}: 全局组件，点击计数器:{{count}}',

    //注意：在自定义的组件中需要使用函数来定义data
    data: function() {
        return {
            count: 0
        }
    },
    
    //定义响应事件函数
    methods: {
        doClick: function() {
            //注意此处this的作用返回是自定义组件,而不是上面声明
            //的vue实例.
            this.count++;
        }
    }
});

var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    }
});

每个 Vue 组件本质上是一个拥有预定义选项的 Vue 实例。下面我将通过主要特性详细介绍 Vue 组件的各个方面：

2. 组件定义

在 Vue 中，组件可以用多种方法定义，最简单的方法是一个对象字面量：

// 定义一个新组件叫做 `my-component`
Vue.component('my-component', {
  // 选项...
})

这里，Vue.component 是用于注册全局组件的方法，它接受两个参数：组件的名字和一个选项对象，这个选项对象可以指定组件的数据、模板、方法、生命周期钩子等。

组件也可以以局部注册的方式存在，即在其他组件的选项对象中的 components 属性定义：

var Child = {
  // 选项...
}

var Parent = new Vue({
  components: {
    'my-component': Child
  }
})

3. 组件模板

组件的模板定义了组件的 HTML 结构。它通常在单文件组件（.vue 文件）的