局部组件

 

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

 

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

 

const ComponentA = {

  /* ... */

}

const ComponentB = {

  /* ... */

}

const ComponentC = {

  /* ... */

}

然后在 components 选项中定义你想要使用的组件：

 

const app = Vue.createApp({

  components: {

    'component-a': ComponentA,

    'component-b': ComponentB

  }

})

对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字（component-a、component-b），其属性值就是这个组件的选项对象（ComponentA、ComponentB）。

 

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

 

局部组件实例

注册一个简单的局部组件 runoobA，并使用它：

 

<div id="app">

    <runoob-a></runoob-a>

</div>

<script>

var runoobA = {

  template: '<h1>自定义组件!</h1>'

}

 

const app = Vue.createApp({

  components: {

    'runoob-a': runoobA

  }

})

 

app.mount('#app')

</script>