vue的学习之路（Vue中组件(component )，2024年最新详解系列文章

作者：System 时间：2024年08月10日分类：所有,vue.js 字数：663

在Vue中，组件是可复用的实例，它们定义了一种特别的Vue实例，可以把组件看作自定义的HTML元素。

创建一个全局组件：




Vue.component('my-component-name', {
  // 选项
  template: '<p>A custom component!</p>'
})

在Vue单文件组件（.vue）中定义：




<template>
  <div>A custom component!</div>
</template>
 
<script>
export default {
  // 选项
}
</script>

局部组件：




const MyComponent = {
  template: '<p>A custom component!</p>'
}
 
new Vue({
  components: {
    'my-component-name': MyComponent
  }
})

使用组件：




<div id="app">
  <my-component-name></my-component-name>
</div>

注意：组件命名可以使用kebab-case（短横线分隔命名）或者CamelCase命名，但在使用时只能使用kebab-case，因为HTML是大小写不敏感的。