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>