详解Vue的组件注册

下面我将详细讲解“详解Vue的组件注册”的完整攻略，包括组件的注册和使用。

什么是组件注册

在Vue中，组件就是可以重复使用的模块化代码块。组件注册就是将组件注册到Vue实例中，以便在实例中使用。

组件注册的方式

Vue中有两种注册组件的方式：全局注册和局部注册。

全局注册

全局注册是将组件注册到Vue实例中的方式，可以在任何Vue实例中使用该组件。

全局注册的方式是通过Vue对象的component方法进行注册：

Vue.component('组件名', 组件);

其中，组件名是注册的组件名称，组件是组件对象。

示例：

// 定义一个组件对象
var myComponent = {
    template: '<p>我是全局注册的组件</p>'
};
// 注册组件
Vue.component('my-component', myComponent);

局部注册

局部注册是将组件注册到某个Vue组件内部的方式，只能在该组件及其子组件中使用该组件。

局部注册的方式是将组件对象作为某个Vue组件的属性传递进去。

示例：

// 定义一个组件对象
var myComponent = {
    template: '<p>我是局部注册的组件</p>'
};

Vue.component('father-component', {
    components: {
        'my-component': myComponent
    },
    template: '<div>\
                <p>我是父组件</p>\
                <my-component></my-component>\
              </div>'
});

组件的使用

组件注册完成后，就可以在Vue实例中直接使用该组件了。

全局组件的使用

全局注册的组件可以在Vue实例中直接使用。

示例：

new Vue({
    el: '#app',
    template: '<div>\
                <p>我是父组件</p>\
                <my-component></my-component>\
              </div>',
    components: {
        'my-component': myComponent
    }
});

局部组件的使用

局部注册的组件只能在注册该组件的Vue组件及其子组件内部使用。

示例：

Vue.component('father-component', {
    components: {
        'my-component': myComponent
    },
    template: '<div>\
                <p>我是父组件</p>\
                <my-component></my-component>\
              </div>'
});

new Vue({
    el: '#app',
    template: '<father-component></father-component>'
});