完整代码如下：

//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自定义组件：

name :"Second",

data(){return{

secondMsg:"Second vue"}

}

}

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

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

//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中引入的时候代码是一样的：

最后

以上就是失眠路灯为你收集整理的vue怎么自己创建组件并引用_Vue：如何在vue-cli中创建并引入自定义组件{{msg}}{{secondMsg}}{{msg}}的全部内容，希望文章能够帮你解决vue怎么自己创建组件并引用_Vue：如何在vue-cli中创建并引入自定义组件{{msg}}{{secondMsg}}{{msg}}所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。