【前端每日一题】vue中如何自定义组件？

在Vue中，自定义组件需要先定义一个Vue组件，然后在需要使用该组件的地方进行注册。

定义Vue组件的方式有两种：

1. 使用Vue.extend()方法

// 定义一个组件
var MyComponent = Vue.extend({
  template: '<div>这是一个自定义组件</div>'
})

// 注册组件
Vue.component('my-component', MyComponent)

2. 使用Vue.component()方法

// 注册组件
Vue.component('my-component', {
  template: '<div>这是一个自定义组件</div>'
})

注册完组件后，就可以在模板中使用该组件了：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

需要注意的是，组件名必须使用kebab-case（短横线连接）命名方式，否则会报错。例如，组件名应该是my-component，而不是MyComponent或myComponent。