vuejs定义组件的几种方法

　　Vue.js 定义组件的几种方法：

　　1. 全局组件

　　可以使用 Vue.component() 全局方法注册一个组件，然后在任何Vue实例的模板中使用该组件。

　　举例：

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

   　在实例中使用：

<my-component></my-component>

      2. 局部组件

　　在Vue实例中，也可以定义局部组件。局部组件只能在该实例之中使用。

　　举例：

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': {
      template: '<div>A custom component!</div>'
    }
  }
})

      在实例的模板中使用：

<my-component></my-component>

      3. .vue文件组件

　　.vue文件组件是一种完整的 Vue 组件，它将Vue的模板、JavaScript代码和样式封装在一个单独的文件之中。可以使用Vue-cli创建一个.vue文件组件。

　　比如，一个hello.vue的文件组件是：

<template>
  <div>Hello, {{name}}!</div>
</template>

<script>
export default {
  name: 'Hello',
  props: {
    name: {
      type: String,
      required: true
    }
  }
}
</script>

<style>
div {
  color: red;
}
</style>

      在其他组件中引入：

<template>
  <div>
    <my-hello :name="'world'"></my-hello>
  </div>
</template>

<script>
import Hello from '@/components/Hello.vue'

export default {
  name: 'MyComponent',
  components: {
    'my-hello': Hello
  }
}
</script>

      4. function API

　　Vue.js 3.0开始支持了全新的 function API。通过创建一个返回值为对象的工厂函数，可以定义组件。

　　比如：

import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    // ...
  },
  data() {
    return {
      // ...
    }
  },
  methods: {
    // ...
  },
  template: `
    <div>
      // ...
    </div>
  `
})

      这是Vue.js 3.0以及更高版本中定义组件的推荐方式。