首页 / 知识

局部组件使用说明

2023-04-11 13:14:00

局部组件

全局注册往往是不够理想的。比如，如果你使用一个像 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，并使用它：

<runoob-a></runoob-a>

</div>

var runoobA = {

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

}

const app = Vue.createApp({

components: {

'runoob-a': runoobA

}

})

app.mount('#app')

</script>