vue怎么自己创建组件并引用_Vue：如何在vue-cli中创建并引入自定义组件

一、创建并引入一个组件

1、创建组件

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

{{msg}}

//1、export 表示导出,在自定义组件里面使用export default导出

exportdefault{//name 表示设置别名，可以不设置，建议和组件的名称一致

name:"First",

data(){return{

msg:"First Vue"}

}

}

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

1、在

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

import First from "./components/First"

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

// 2、添加自定义组件

components:{

First

}

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

完整代码如下：

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

import First from"./components/First"exportdefault{

name:'App',//2、添加自定义组件

components:{

First

}

}

}

效果：

二、引入嵌套组件

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

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

{{secondMsg}}

name :"Second",

data(){return{

secondMsg:"Second vue"}

}

}

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

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

{{msg}}

//1、使用import导入Second.vue

import Second from'./Second';//export 表示导出

exportdefault{//name 表示设置别名，可以不设置，建议和组件的名称一致

name:"First",

data(){return{

msg:"First Vue"}

},//2、添加自定义组件组件

components:{

Second

}

}

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

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