实例:

// 创建一个Vue 应用
const app = Vue.createApp({})
 
// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
})
app.mount('#components-demo')

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

1. 效果演示:

1. 说明:

每个组件实例之间的数据是独立的, 即组件是可复用的

使用第三方组件库

child::Vue组件库