组件中的数据存储的位置

1.组件中数据存放位置的引入

组件的html部分可以存放在template标签中，并且template标签是独立在Vue实例外的，
若template中的数据也需要动态化的话，那动态数据存放在哪？
是否同样存放在Vue实例中呢？

验证Vue组件是否能使用Vue实例data中的数据：

        <div id="app">
            <cpn1></cpn1>
        </div>
        <template id="cpn1">
            <div>
                <h2>{{message}}</h2>
            </div>
        </template>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.component('cpn1',{
                template:'#cpn1'
            })
            const app = new Vue({
                el: '#app',
                data: {
                    message: 'hello'
                }
            })
        </script>

报错：message没有定义

image.png

说明Vue组件不能使用Vue实例data中的数据。
即使组件能使用Vue实例中的数据，但是一个页面划分成若干个组件，每个组件中的数据都存放在Vue实例中的data里，会让Vue实例变得非常臃肿。
所以无论如何，Vue组件中的数据是不会存放在Vue实例中的。

因为Vue组件的原型链上有Vue实例的原型，所以Vue组件的数据应该存放在自己的data内。

2.组件中数据的存放位置

        <template id="cpn1">
            <div>
                <h2>{{message}}</h2>
            </div>
        </template>

组件中的数据存放在组件的data内，并且data是个函数，函数内return回一个对象，在return回的对象中存放数据

            Vue.component('cpn1',{
                template:'#cpn1',
                data(){
                    return{
                        message:'hello'
                    }
                }
            })

image.png

下一篇说明组件中的data为什么必须是个函数