什么是组件？

组件是自定义的、可复用的vue实例，里面封装可重用的HTML代码。

如下定义一个全局组件

Vue.component("button-counter", {
        data(){
            return {count : 1}
        },
        methods:{
            add(){
                this.count++;
            }
        },
         //模板
        template: '<button @click="add">点击加1：{{ count }}</button>'
    });

定义组件时需要注意的点：

• 组件名不支持驼峰式，如：buttonCounter
• data必须是一个函数

• 在定义组件时，我们应该只有一个根标签

在vue实例中data是这样的

data:{
            count: 0
        }

在组件中应该是这样

data(){
            return {count : 1}
        }

像这样只有一个根标签 

//只有div一个根
`<div>
    <h1></h1>
    <h2></h2>
</div>`

 

//div和h2都为根，那么h2将不起作用
`<div>
    <h1></h1>
</div>
<h2></h2>`

 

使用

<button-counter>标签是我们刚才自定义的组件

<div id="app">
<!--    
    注意：
    使用这个组件，要确保它已经被注册为Vue实例了。
    即像这样：
        var app = new Vue({
            el:"#app",
        })
-->
    <button-counter></button-counter>
</div>

定义一个局部组件

var app = new Vue({
        el:"#app",
        data:{
            count: 0
        },
        //局部组件
        components:{
            'button-counter':{
                data(){
                    return {count : 1}
                },
                //注意这里访问到的是局部组件中的count
                //在组件中访问不到外部的数据
                template: '<button @click="count++">点击加1：{{ count }}</button>'
            }
        }
    })