Vue中组件的data和methods

1，定义组件中数据和方法

组件可以有自己的数据

组件的data和实例data不一样，实例data是一个对象

组件的data是一个方法，该方法必须返回一个对象

组件中的data数组使用方式和实例中的data使用方式完全一样

<script>
    var vm = new Vue({
        el: '#app',
        components: {
            mycom: {
                template: '#tmp',
                data: function(){
                    return {
                        msg: 0
                    }
                },
                methods: {
                    add(){
                        return this.msg++
                    }
                }
            }
        }
    })
</script>

2，组件的使用

<div id="app">
    <mycom></mycom>
    <mycom></mycom>
    <mycom></mycom>
</div>
<template id="tmp">
    <div>
        <input type="button" value="+1" @click="add">
        <h3>{{msg}}</h3>
    </div>
</template>