vue基础：在跟组件（App.vue）调用外部组件

vue基础：在跟组件（App.vue）调用外部组件

在vue学习中，我们发现将所有的组件，都放在根组件是不合理的，同样也是低效的。于是我们将不同的模块分割，需要哪个模块的时候就可以直接调用。这类似于html5中模板的性质。
1.首先我们需要创建一个组件，所有的组件可以放在一个目录里，便于规范化管理。
2.创建所有的组件也需要像根组件一样，严格的格式要求。

<template>
    <div>
        <h2>这是一个外部组件</h2>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

3.组件创建完成，就要在根组件汇中调用
3.1首先导入，挂载

<script>
import Home from './components/Home.vue'//导入组件
export default {
  data(){
    return{
      msg:'hello vue'
    }
  },
  components:{//挂载组件
      'v-home':Home//v-home自定义标签
    }
}
</script>

3.2通过显示
App.vue

<template>
  <div id="app">
   {{msg}}
   <br>
    <v-home/>
  </div>
</template>

<script>
import Home from './components/Home.vue'
export default {
  data(){
    return{
      msg:'hello vue'
    }
  },
  components:{
      'v-home':Home
    }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>