VUE组件复习一下

最新推荐文章于 2022-07-10 13:44:25 发布

原创最新推荐文章于 2022-07-10 13:44:25 发布 · 240 阅读

CC 4.0 BY-SA版权

文章标签：

32 篇文章

订阅专栏

本文介绍了Vue.js中组件注册的方法，包括全局注册和局部注册两种形式，并解释了局部注册的优势及如何实现。此外还提供了使用JavaScript对象定义组件的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件命名有两种方式：- 连字符号，大驼峰式

创建：1.全局注册

Vue.component('my-component-name', {
  // ... 选项 ...
})

2.局部注册

好处：减少了性能损耗，减少了无所谓的js增加。

1）通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }

2）在 components 选项中定义你想要使用的组件：

new Vue({
  el: '#app'
  components: {
    'component-a': ComponentA
    '自定义组件名':js对象
  }
})

PS：：局部注册的组件在其子组件中不可用。如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

注意在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：