Vue 脚手架 之 组件的创建与使用

1.使用之前要在components 文件下创建一个自己的 组件文件（Son.vue）

<!--html区域-->
<template>
    <div class="son">
      {{ name }}
    </div>
</template>
 
<!--JS区域-->
<script>
    export default {
        name: "Son",
      data(){
          return {
            name:"我是子组件"
        }
      }
    }
</script>
 
<!--css区域-->
<style scoped>
.son{
  color: blue;
}
</style>

2.子组件创建好后，来注册它注册有两种方式分为局部注册和全局注册

（1）局部注册组件 ：在App.vue文件中注册   也在App.vue文件使用

<!--html区域-->
<template>
    <div id="app">
    <-- 使用自定义组件标签 -->
      <Son />
    </div>
</template>
 
<!--JS区域-->
<script>
    // 局部注册组件
    import Son from './components/Son'
    export default {
        name: "App",
        // 注册组件标签
        components: {
            Son,
        }
    }
</script>
 
<!--css区域-->
<style scoped>

</style>

（2）全局注册组件：在main.js文件中注册，使用还是和局部注册一样使用不过全局注册的在每个组件中都能用

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//引用子组件文件
import Son from './components/Son'
//全局注册组件
Vue.component('Son', Son)

new Vue({
  render: h => h(App),
}).$mount('#app')