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

创建: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 的缩写,即这个变量名同时是:

  • 用在模板中的自定义元素的名称
  • 包含了这个组件选项的变量名

 

 

 

Logo

前往低代码交流专区

更多推荐