组件(Component)是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素,封装可重组的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任何类型的应用的界面都可以抽象为一个组件树:
每个 Vue 应用都是通过用 createApp 函数创建的,传递给 createApp 的选项用于配置根组件。当我们挂载应用时,该组件被用作渲染的起点。
一个应用需要被挂载到一个 DOM 元素中。
以下实例我们将 Vue 应用挂载到 <div id="app"></div>,应该传入 #app:
const RootComponent = { /* 选项 */ } const app = Vue.createApp(RootComponent) const vm = app.mount('#app')
注册一个全局组件语法格式如下:
const app = Vue.createApp({...}) app.component('my-component-name', { /* ... */ })
my-component-name 为组件名,/* ... */ 部分为配置选项。注册后,我们可以使用以下方式来调用组件:
<my-component-name></my-component-name>
一个简单的 Vue 组件的实例:
全局组件实例
注册一个简单的全局组件 runoob,并使用它:
<div id="app"> <runoob></runoob> </div> <script> // 创建一个Vue 应用 const app = Vue.createApp({}) // 定义一个名为 runoob的新全局组件 app.component('runoob', { template: '<h1>自定义组件!</h1>' }) app.mount('#app') </script>
接下来我们再注册一个 button-counter 组件,在每次点击后,计数器会加 1:
// 创建一个Vue 应用
const app = Vue.createApp({})
// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
data() {
return {
count: 0
}
},
template: `
<button @click="count++">
点了 {{ count }} 次!
</button>`
})
app.mount('#app')
</script>
注意:template 中 ` 是反引号,不是单单引号 '。
组件的复用
你可以将组件进行任意次数的复用:
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
全局组件
以上的实例中我们的组件都只是通过 component 全局注册的。
全局注册的组件可以在随后创建的 app 实例模板中使用,也包括根实例组件树中的所有子组件的模板中。
<div id="app">
<runoob></runoob>
</div>
<script>
// 创建一个Vue 应用
const app = Vue.createApp({})
// 定义一个名为 runoob 的新全局组件
app.component('runoob', {
template: '<h1>自定义组件!</h1>'
})
app.mount('#app')
</script>
局部组件
对于 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>