千家信息网

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

发表于:2025-01-31 作者:千家信息网编辑
千家信息网最后更新 2025年01月31日,小编给大家分享一下vue怎么使用脚手架vue-cli创建并引入自定义组件,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一、创建并引入一个组件1、创建组件vue-cli中的所有组件都是
千家信息网最后更新 2025年01月31日vue怎么使用脚手架vue-cli创建并引入自定义组件

小编给大家分享一下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创建并引入自定义组件"有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!

0