1. 組件封裝

// HelloWorld.vue組件
<template>
  <div>
    自定義組件
  </div>
</template>

<script>
export default {
  data() {
    return {
      key: 'value'
    }
  },
  // 組件交互
}
</script>

<style scoped lang="less">
// 組件樣式
</style>

　　2、 局部注冊調用組件

// Test.vue

<template>

    <div>

        <HelloWorld/>

    </div>

</template>

<script>

    import HelloWorld from './HelloWorld.vue'

    export default {

        components:{

            HelloWorld

        }

    }

</script>

<style lang="less" scoped>

</style>

　　3、 全局注冊使用

　　· 先在main.js中全局注冊該組件

　　import Vue from 'vue'

　　import App from './App.vue'

　　//全局注冊

　　import HelloWorld from './components/HelloWorld.vue'

　　Vue.component('hello-world',HelloWorld)

　　new Vue({

　　render: h => h(App),

　　}).$mount('#app')

　　· 然后在需要使用公共組件的業務組件中，調用該組件

　　// Test.vue

<template>

    <div>

        <hello-world></hello-world>

    </div>

</template>

<script>

    export default {

    }

</script>

<style lang="less" scoped>

</style>