Vue 子組件data設置踩坑

vue子組件

實踐一下, 沒想到踩了一個坑

<div id="app">
    <counter></counter>
</div>

<script>
    Vue.component('Counter', {
        data: {
            value: 0
        },
        template: '<div>haha {{value}}</div',

    })
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
</script>

然后打開瀏覽器，發現報錯ReferenceError: value is not defined

后來想起來看過的視頻說 子組件的data要是個function

data () {
    return {value: 0}
}

至於為什么要是function，不能是Object呢, 因為，一個組件可能包括多個相同的子組件，如果是object的化，就是個共享變量了，會導致問題，所以子組件的data要是個function，保證獨立