今天你学习了吗——vue组件（一）

组件是Vue的最核心的功能，在前端应用程序中可以采用模块化的开发，实现课重用、可扩攒。组件就是一个带有名字的可服用的Vue实例，因此在Vue实例中的各个选项也可以在组件中使用，唯一例外的是el选项。接下来我们具体去了解一下组件

组件的注册

组件的注册分两种形式，一种全局注册一种局部注册。

全局注册

在Vue中只能通过Vue.component来创建全局组件

    <div id="app">
        <input-button></input-button>
    </div>
    <script>
        //注册全局组件
        Vue.component('InputButton', {
            data: function() {
                return {
                    num: 1
                };
            },
            methods: {
                ck() {
                    this.num++;
                    console.log(this.num);
                }
            },
            template: '<input type="button" @click="ck" value="点击一下" name="click"/>'
        })
        let vm = new Vue({
            el: "#app"
        })
    </script> 

我们通过全局注册的方式注册了一个新组件， 第一个参数表示组件名 ，第二个参数表示一个函数对象。
组件有两种命名方式，第一种 kebab-case (短横线分隔命名) ，这种方式命名在使用的时候只能通过kebab-case形式使用；第二种 PascalCase (首字母大写命名) ，这种方式在使用的时候两种命名法都可以使用，但是在页面上只能只用kebab-case形式。

函数对象除了上述案例中的写法，还也可以使用Vue.extend()方法，而且通过全局注册方式注册的组件可以在其他组件中使用。

    <div id="app">
        <input-button></input-button>
        <input-button2></input-button2>
    </div>
    <script>
        //Vue.extend()和嵌套使用
        Vue.component('InputButton', {
            data: function() {
                return {
                    num: 0
                };
            },
            methods: {
                ck() {
                    this.num++;
                    console.log(this.num);
                }
            },
            template: '<input type="button" value="点击一下" @click="ck"/>'
        })
        let MyCompoent = Vue.extend({
            template: '<input-button></input-button>'
        })
        Vue.component('input-button2', MyCompoent)
        let vm = new Vue({
            el: "#app"
        })
    </script>

上述案例中，第二个组件的注册我们使用了kebab-case命名方式和直接使用第一个组件

局部注册

局部组件是在Vue实例的选项对象中使用components选项来注册。

    <div id="app">
        <input-button></input-button>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            components: {
                InputButton: {
                    data: function() {
                        return {
                            num: 0
                        }
                    },
                    methods: {
                        ck() {
                            this.num++;
                            console.log(this.num);
                        }
                    },
                    template: '<input type="button" value="点击一下" @click="ck"/>'
                }
            }
        })
    </script>

我们通过局部注册的方式注册了一个组件，以局部注册方式注册的组件命名方式和全局注册相同，而且也可以通过Vue.extend()方法去构造组件的函数对象。局部注册的组件只能在父组件的模板中使用，不能在全局使用。