14. 全局和局部组件注册

组件名

组件名称建议使用【-】的方式，如aaa-b

全局注册

Vue.component("component1", {
       template: "<p>全局模板</p>"
 })

该方法注册的组件为全局组件，在任何地方都可以使用。但是这样一来就可能出现非常多的无用组件（想象一下大量的全局变量）。

所以，组件还有局部注册的方法：

局部注册

<parent-node></parent-node>


var component2 = {
            template: "<p>局部模板2</p>"
        }

如你所见，局部组件的内容是全局的{}中的部分，想要引用这个局部组件，则需要这样：

var component3 = {
            props: {
                "title": String
            },
            template: "<p>模板3 {{title}}</p>"
        }

var component4 = {

            template: `
                <div>
                添加一层试试看
                <childNode :title="title"></childNode> 
                <p>有效果吗</p>   
                </div>
            `,
            components: {
                c3: component3,
                childNode: component3
            },
            data: () => {
                return {
                    title: "this is a new title"
                }
            }

        }
var vm = new Vue({
            el: ".app",
            data: {
                newTitle: "a new move title"
            },
            components: {
                'component-a': component2,
                'component-b': component3,
                "parent-node": component4,
                "static-value": component5,
                "move-title": component5,
                component6,
                component7
            }
        })

如上，就是一个嵌套调用局部组件的组件了。