Vue.js组件注册

布满荆棘的人生 2021-06-24 16:10 495阅读 0赞

组件是Vue.js最推崇的，也是最强大的功能之一，核心目标是为了可重用性高，减少重复性的开发。  
组件有两种注册方式：**全局注册**和**局部注册**。

## 全局注册 ##

Vue.component('my-component',MyComponent)

如上所示，第一个参数是注册组件的名称（在HTML中可以使用组件：</my-component）；第二个参数是组件的构造函数，它可以是Function，也可以是Object。  
**Function**

var MyComponent=Vue.extends({
      //选项...
    })

**Object**

//在一个步骤中扩展和注册
    Vue.component('my-component',{
      template:'<div>A custom component!</div>'
    })

组件注册之后，便可在父实例的模块中以自定义元素的形式使用，要确保在初始化根实例之前注册了组件，代码示例如下：

<body>
      <div id="example">
        <my-component></my-component>
      </div>
    </body>
    <script>
       var MyComponent=Vue.extend({
          template:'<div>A custom component!</div>'  
       })
        //注册
        Vue.component('my-component',MyComponent)
        //创建根实例
        new Vue({
          el:'#example'
        })
    </script>

## 局部注册 ##

不需要每个组件都全局注册，可以让组件只能用在其他组件内，可以用实例选项componets注册，代码示例如下：

<body>
      <div id="example">
        <my-component></my-component>
      </div>
    </body>
    <script>
       var Child=Vue.extend({
          template:'<div>I am Child!</div>',
          replace:true
       })
       var Parent=Vue.extend({
          template:'<p>I am parent!</p><br/><child></child></div>'  ,
          components:{
            //<my-component>只能用在父组件模板内，因为在根实例componets中注册了
            'child':Child
          }
       })
        //创建根实例
        new Vue({
          el:'#example',
          components:{
            'my-component':Parent
          }
        })
    </script>

如果想让事件变得更简单，也可以直接传入选项对象而不是构造器给Vue.components选项，代码示例如下：

//在一个步骤中扩展和注册
    Vue.component('my-component',{
      template:'<div>A custom component!</div>'
    })
    //局部注册也可以这样
    var Parent=Vue.extend({
      components:{
        'my-component':{
          'my-component':{
            template:'<div>A custom component!</div>'
          }
        }
      }
    })