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>