vue 引入组件defincompnoent

Vue.js 中引入组件可以使用 Vue.component() 或者 Vue.extend() 方法。其中，Vue.component() 是 Vue.js 1.x 版本中的方法，Vue.extend() 是 Vue.js 2.x 版本中的方法。

使用 Vue.component() 方法引入组件时，需要传入两个参数，第一个参数是组件的名称，第二个参数是一个对象，用于描述组件的属性和行为。示例如下：

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello, Vue.js!'
    }
  }
})

使用 Vue.extend() 方法引入组件时，需要先定义一个组件构造函数，然后传入一个描述组件的对象作为参数。示例如下：

var MyComponent = Vue.extend({
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello, Vue.js!'
    }
  }
})

Vue.component('my-component', MyComponent)

在使用引入的组件时，只需要在模板中使用组件的名称即可。示例如下：

<div id="app">
  <my-component></my-component>
</div>

<script>
new Vue({
  el: '#app'
})
</script>