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

一、创建并引入一个组件

1、创建组件

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

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

1、在

效果：

二、引入嵌套组件

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

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

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

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

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

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

4、效果

到此这篇关于vue使用脚手架vue-cli创建并引入自定义组件的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。