·局部注册的组件只能用在当前实例或组件中

    局部注册 - 图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-b></my-com-b> </div> <div id=“app2”> <my-com-a></my-com-a> </div> <script src=“lib/vue.js”></script> <script> new Vue({ el: ‘#app’, data: { }, components: { ‘my-com-a’: { template: `

    {{ title }}

    {{ content }}
    `, data () { return { title: ‘组件 A 标题’, content: ‘组件 A 内容’ } } }, MyComB: { template: `

    {{ title }}

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

    ·单独配置组件的选项对象:

    局部注册 - 图2

    ·ES6的对象属性简写:

    局部注册 - 图3

    <!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-component-a></my-component-a> <my-component-b></my-component-b> </div> <script src=“lib/vue.js”></script> <script> // 组件 A 的选项对象 var MyComponentA = { template: `

    {{ title }}

    {{ content }}
    `, data () { return { title: ‘组件 A 标题’, content: ‘组件 A 内容’ } } }; // 组件 B 的选项对象 var MyComponentB = { template: `

    {{ title }}

    {{ content }}
    `, data () { return { title: ‘组件 B’, content: ‘组件 B 内容’ } } } new Vue({ el: ‘#app’, data: { }, components: { ‘my-component-a’: MyComponentA, MyComponentB } }); // new Vue({ // el: ‘#app2’ // }) </script> </body> </html>