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

posted @ 2020-02-12 10:31  Draymonder  阅读(824)  评论(0编辑  收藏  举报