vue 组件及动态组件使用

写在前言：

组件：是可复用的 Vue 实例。

在注册一个组件的时候，我们始终需要给它一个名字，该组件名就是 Vue.component 的第一个参数。

组件命规则：

1、使用 kebab-case

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

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，

例如 <my-component-name>。

2、使用 PascalCase

Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

注册全局组件1：main.js

// 定义一个名为 button-counter 的全局新组件
Vue.component('button-counter', {
  data () {
    return {
      count: 0
    }
  },
  template: '<button class="button" v-on:click="onClick">You clicked me {{ count }} times.</button>',
  methods: {
    onClick() {
      console.log('触发事件')
      this.count++
    }
  }
})

或写法2：main.js

import Children from '@/components/children.vue'
 Vue.component('button-counter', Children)

children.vue

<template>
  <div>
    <button class="button" v-on:click="onClick">You clicked me {{ count }} times.</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    methods: {
      onClick() {
        console.log('触发事件')
        this.count++
      }
    }
  }
</script>

使用相同：

 <button-counter></button-counter>

局部注册组件：

import ComponentA from './ComponentA.vue'

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