创建全局组件

注意：

• 如果使用Vue.component定义全局组件的时候，组件名使用了驼峰命名，在引用组件的时候需要把大写的驼峰改成小写的字母，同时两个单词之间使用-连接
• 如果不使用驼峰 则直接拿名称来引用即可

<div id="app">
    <!-- 3. 使用组件 直接把组件的名称以HTML标签的形式引入到页面中即可 -->
    <my-com1></my-com1>
</div>
<script>
    // 1. 使用Vue.extend来创建全局的Vue组件
    var com1 = Vue.extend({
        template: '<h3>这是子组件</h3>'
    })
    // 2. 使用Vue.component('组件的名称',创建出来的组件模板对象)
    Vue.component('myCom1', com1)
    var app = new Vue({
        el: '#app',
        data: {}
    })
</script>

可以简化为以下代码：

<div id="app">
    <my-com></my-com>
</div>
<script>
    Vue.component('myCom', Vue.extend({
        template: '<h3>这是子组件</h3>'
    }))
    var app = new Vue({
        el: '#app'
    })
</script>

还可以简写为以下形式：

<div id="app">
    <my-com></my-com>
</div>
<script>
    Vue.component('myCom', {
        template: '<h3>这是子组件</h3>'
    })
    var app = new Vue({
        el: '#app'
    })
</script>

创建私有组件

<div id="app">
    <login></login>
</div>
<script>
    var app = new Vue({
        el: '#app',
        components: {
            login: {
                template: '<h2>这是私有组件</h2>'
            }
        }
    })
</script>

也可以这样写：

<div id="app">
    <login></login>
</div>
<script>
    var login = {
        template: '<h2>这是私有组件</h2>'
    }
    var app = new Vue({
        el: '#app',
        components: {
            login
        }
    })
</script>

组件的模板抽离写法

<div id="app">
    <login></login>
</div>
<template id="tmpl">
    <div>
        <h2>这是私有组件</h2>
    </div>
</template>
<script>
    var login = {
        template: '#tmpl'
    }
    var app = new Vue({
        el: '#app',
        components: {
            // login: login
            login
        }
    })
</script>

组件的data

1. 组件的data必须是一个方法
2. 这个方法内部必须返回一个对象
3. 组件中的data数据使用方式和实例中的data使用方式完全一样

<div id="app">
    <my-com></my-com>
</div>
<template id="tmpl">
    <div>
        <header>这是私有组件</header>
        <h2>{{message}}</h2>
    </div>
</template>
<script>
    var myCom = {
        template: '#tmpl',
        data() {
            return {
                message: 'hello'
            }
        }
    }
    var app = new Vue({
        el: '#app',
        components: {
            myCom
        }
    })
</script>

为什么组件中的data必须是一个函数？

因为在多次使用同一个组件的时候，如果data不是函数，就意味着在共用同一个对象，如计数器案例，页面中有多个计数器组件，点击第一个计数器的加号按钮，页面中所有的计数器都会增加，而data如果是一个函数就意味着各个计数器使用的是不同的对象，就互不影响

如果想要达到互相影响的效果可以这样做：

<div id="app">
    <my-com></my-com>
    <my-com></my-com>
    <my-com></my-com>
</div>
<template id="tmpl">
    <div>
        <h2>当前计数：{{counter}}</h2>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </div>
</template>
<script>
    var obj = {
        counter: 0
    }
    var myCom = {
        template: '#tmpl',
        data() {
            return obj;
        },
        methods: {
            increment() {
                this.counter++;
            },
            decrement() {
                this.counter--;
            }
        }
    }
    var app = new Vue({
        el: '#app',
        components: {
            myCom
        }
    })
</script>