vue局部组件与全局组件的注册

1、全局组件注册

• 在components文件夹内创建组件文件
  
  在Home.vue文件内写入需要的内容

<template>
  <div class="nav">
    <h2 style="color: #0000FF;">{{message}}</h2>
  </div>
</template>

<script>
  export default{
    name:'Home', //此处的name是方便在浏览器中的vue组件中进行排查
    data(){
      return{
        message:'这是一个自定义的组件'
      }
    }
  }
</script>

<style>
</style>

• 使用全局组件的时候，需要在main.js文件内引入该组件

import Home from '@/components/Home.vue'
Vue.component('v-Home',Home)

• 在那个文件内需要使用该组件时，便在哪个文件内使用该组件的标签可

<template>
  <div>
    <h2>{{mag}}</h2>
    <v-Home></v-Home>
  </div>
</template>

<script>
  export default{
    name:'Home',
    data(){
      return{
        mag:'您好，欢迎您的到来！'
      }
    }
  }
</script>

<style>
</style>

2、局部组件注册

• 组件创建之后，在需要该组件的文件内引入该组件即可

<template>
  <div>
    <h2>{{mag}}</h2>
    <Home></Home>
  </div>
</template>

<script>
  import Home from '@/components/Home.vue'
  export default{
    data(){
      return{
        mag:'您好，欢迎您的到来！'
      }
    },
    components:{
      Home
    }
  }
</script>

<style>
</style>

注意：

• 在引入组件的文件内的命名，图片中2、3的命名是跟着1进行命名的
  
• 也可以这样写，但是没有上边写的简便