VUE组件复习一下

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

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

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