vue组件中的data

组件可以有自己的data数据 组件的data和vue实例中的data有点不一样，实例中的data可以为一个对象，但是组件的data，必须是一个方法 组件中的data出了必须为一个方法以外，这个方法内部，还必须返回一个对象才行 组件中的data数据使用方式和实例中的data使用方式完全一样。 如下定义了一个模板，为模板赋值一个id，供组件直接调用模板

    <div id="app">
        <main_nav></main_nav>
    </div>
    <template id="main_nav">
        <div>
            <h3>{{username}}个人主页</h3>
            <ul>
                <li>姓名:{{username}}</li>
                <li>年龄:{{age}}</li>
                <li>住址:{{address}}</li>
            </ul>
        </div>
    </template>

let main_nav = {
            template:'#main_nav',
            //组件中data数据必须返回一个对象,是用和vue实例是一样的
            //当然我们可以在data函数中编写逻辑代码但是不能使用vue实例中的数据，他们是隔离的
            //组件的数据是每个组件中独有的，每一个组件的数据是隔离的
            //vue对象本质也是一个组件，我们认为它就是父组件，自己定义的组件就是子组件，父子组件的数据是隔离的
            data () {
                return {
                    username:'张三',
                    age:12,
                    address:'温州',
                }
            }
        };
        Vue.component('main_nav', main_nav)
        let vm = new Vue({
            el : "#app",
            data : {
                
            }
        })