一、创建并引入一个组件

1、创建组件

vue-cli中的所有组件都是存放在components文件夹下面的，所以在components文件夹下面创建一个名为First.vue的自定义组件：

<template>
    <div>
        <h1>{{msg}}</h1>
    </div>
</template>
<script>

// 1、export 表示导出,在自定义组件里面使用export default导出 
export default { // name 表示设置别名，可以不设置，建议和组件的名称一致
 name:"First",
    data(){ return{
            msg:"First Vue" }
    }
} </script>

2、在App.vue组件里面引用First.vue组件

1、在<script>标签里面使用import导入自定义的标签：

// 1、导入自定义组件 First即First.vue组件里面设置的name值
import First from "./components/First"</pre>

2、在export里面添加自定义组件：

// 2、添加自定义组件
  components:{
    First
  }

3、在<template>标签里面引入自定义组件：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- <router-view/> -->
    <!--3、引用自定义组件-->
    <First></First>
  </div>
</template>

完整代码如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- <router-view/> -->
    <!--3、引用自定义组件-->
    <First></First>
  </div>
</template>

<script>
// 1、导入自定义组件 First即First.vue组件里面设置的name值
import First from "./components/First" export default {
  name: 'App', // 2、添加自定义组件
 components:{
    First
  }
} </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>

效果：

image

二、引入嵌套组件

在上面的示例中，只是在App.vue中引入了单一的组件，如何引入嵌套组件呢？即First.vue组件里面又引用了自定义组件，这时该如何在App.vue组件里面引入呢？

1、先定义Second.vue自定义组件：

<template>
    <div>
        <h1>{{secondMsg}}</h1>
    </div>
</template>

<script> export default { // name 表示设置别名，可以不设置，建议和组件的名称一致
 name :"Second",
    data(){ return{
           secondMsg:"Second vue" }
    }
} </script>

2、在First.vue组件中引用Second.vue组件

在First.vue中引用Second.vue组件和在App.vue中引入First.vue组件是一样的，完整代码如下：

<template>
    <div>
        <h1>{{msg}}</h1>
        <!--3、引用second.vue组件-->
        <Second></Second>
    </div>
</template>
<script>
// 1、使用import导入Second.vue
import Second from './Second'; // export 表示导出
export default { // name 表示设置别名，可以不设置，建议和组件的名称一致
 name:"First",
    data(){ return{
            msg:"First Vue" }
    }, // 2、添加自定义组件组件
 components:{
        Second
    }
} </script>

3、在App.vue中引入嵌套组件

First.vue中引入了Second.vue组件以后，可以把First.vue组件看成是一个组件了，所以在App.vue中引入的时候代码是一样的：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- <router-view/> -->
    <!--3、引用自定义组件-->
    <First></First>
  </div>
</template>

<script>
// 1、导入自定义组件 First即First.vue组件里面设置的name值
import First from "./components/First" export default {
  name: 'App', // 2、添加自定义组件
 components:{
    First
  }
} </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>