data选项用于存储组件的数据,与根实例不同,组件的

    data选项必须为函数,数据设置在返回值对象中。

    data选项 - 图1

    ·这种实现方式是为了确保每个组件实例可以维护一份被返回对象的独立的拷贝,不会相互影响。

    <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> </head> <body> <div id=“app”> <my-com-a></my-com-a> <my-com-a></my-com-a> <my-com-a></my-com-a> </div> <script src=“lib/vue.js”></script> <script> Vue.component(‘MyComA’, { template: `

    {{ title }}

    {{ content }}
    `, data () { return { title: ‘这是组件标题’, content: ‘这是组件内容’ } } }); new Vue({ el: ‘#app’, data: { } }); </script> </body> </html>