携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

组件

组件（Component）是 Vue.js 最强大的功能，几乎没有之一，本人就是因为Vue组件才想学习vue的。

作用：

组件可以扩展 HTML 元素，封装可重用的代码，减少代码的耦合性。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。一个应用需要被挂载到一个 DOM 元素中。

注册一个全局组件语法：

const appdemo = Vue.createApp({...})
appdemo.component('component-name', {
  
})

举例：我们将Vue应用挂载到<div id="appdemo"></div>中

const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#appdemo')

调用组件：以上我们使用了component-name作为组件名，在Vue中我们可以使用<component-name></component-name>来调用组件

全局组件实例

这是注册了一个简单的全局组件

<div id="appdemo">
    <componentdemo></componentdemo>
</div>

<script>
 
// 创建一个Vue 应用
const app = Vue.createApp({})
 
// 定义一个名为 componentdemo 的新全局组件
app.component('componentdemo', {
    template: '<h1>第一个自定义组件!</h1>'
})
 //挂载
app.mount('#appdemo')
</script>

我们使用组件创建一个计数器：

<div id="appdemo">
    <buttondemo></buttondemo>
</div>

<script>
// 创建一个Vue 应用
const app = Vue.createApp({})

// 定义一个名为 buttondemo 的新全局组件
app.component('buttondemo', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      计数： 点击{{ count }} 次！
    </button>`
})
app.mount('#appdemo')
</script>

当我们需要复用组件，只需要将组件名标签写到相应位置即可。

注意 template需要使用反引号而不是单引号。

局部组件

全局注册的组件可以在随后创建的 app 实例模板中使用，也包括根实例组件树中的所有子组件的模板中。但是，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。因此，我们可以使用普通的JavaScript对象来创建组件。

语法：

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}

//然后在 components 选项中定义你想要使用的组件
const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

Vue3学习之路 | 组件

组件

全局组件实例

局部组件