小编给大家分享一下vue怎么使用脚手架vue-cli创建并引入自定义组件,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
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>
1、在<script>标签里面使用import导入自定义的标签:
// 1、导入自定义组件 First即First.vue组件里面设置的name值 import First from "./components/First"
2、在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组件里面引入呢?
<template> <div> <h2>{{secondMsg}}</h2> </div> </template> <script> export default { // name 表示设置别名,可以不设置,建议和组件的名称一致 name :"Second", data(){ return{ secondMsg:"Second vue" } } } </script>
在First.vue中引用Second.vue组件和在App.vue中引入First.vue组件是一样的,完整代码如下:
<template> <div> <h2>{{msg}}</h2> <!--3、引用second.vue组件--> <Second></Second> </div> </template> <script> // 1、使用import导入Second.vue import Second from './Second'; // export 表示导出 export default { // name 表示设置别名,可以不设置,建议和组件的名称一致 name:"First", data(){ return{ msg:"First Vue" } }, // 2、添加自定义组件组件 components:{ Second } } </script>
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>
看完了这篇文章,相信你对“vue怎么使用脚手架vue-cli创建并引入自定义组件”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。