vue怎么使用脚手架vue-cli创建并引入自定义组件

小编给大家分享一下Vue怎么使用脚手架vue-cli创建并引入自定义组件，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

一、创建并引入一个组件

1、创建组件

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

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

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

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

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

在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>

效果：

二、引入嵌套组件

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

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

<template>    <div>        <h2>{{secondMsg}}</h2>    </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>        <h2>{{msg}}</h2>        <!--3、引用second.vue组件-->        <Second></Second>    </div></template><script>// 1、使用import导入Second.vueimport 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>

4、效果

看完了这篇文章，相信你对“vue怎么使用脚手架vue-cli创建并引入自定义组件”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网精选频道，感谢各位的阅读！