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代碼和樣式封裝在一個單獨的文件之中?？梢允褂肰ue-cli創(chuàng)建一個.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。通過創(chuàng)建一個返回值為對象的工廠函數，可以定義組件。

　　比如：

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

      這是Vue.js 3.0以及更高版本中定義組件的推薦方式。