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

红太狼 2022-03-25 12:54 1217阅读 0赞

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

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

<template>
        <div>
            <h2>这是一个外部组件</h2>
        </div>
    </template>
    
    <script> export default { } </script>
    
    <style> </style>

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

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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]: /images/20220325/91156c52b4d143ef9e9f637d887810d0.png