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，保证独立

来源：https://www.cnblogs.com/Draymonder/p/12298055.html