组件的复用

 

你可以将组件进行任意次数的复用：

 

实例

<div id="components-demo">

  <button-counter></button-counter>

  <button-counter></button-counter>

  <button-counter></button-counter>

</div>

 

 

全局组件

 

以上的实例中我们的组件都只是通过 component 全局注册的。

 

全局注册的组件可以在随后创建的 app 实例模板中使用，也包括根实例组件树中的所有子组件的模板中。。

 

全局组件实例

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

 

<div id="app">

    <runoob></runoob>

</div>

 

<script>

// 创建一个Vue 应用

const app = Vue.createApp({})

 

// 定义一个名为 runoob 的新全局组件

app.component('runoob', {

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

})

 

app.mount('#app')

</script>