运维开发网

Vue使用脚手架vue-cli来创建和引入定制组件

运维开发网 https://www.qedev.com 2022-10-19 18:18 出处:网络
这篇文章介绍了vue使用脚手架vue-cli创建并引入自定义组件的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 一、创建并引入一个组件1、创建组件

这篇文章介绍了vue使用脚手架vue-cli创建并引入自定义组件的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 一、创建并引入一个组件1、创建组件

vue-cli中的所有组件都存储在components文件夹下,因此在components文件夹下创建一个名为First.vue的自定义组件:

lt;templategt; lt;divgt; lt;h1gt;{{msg}}lt;/h1gt; lt;/divgt;lt;/templategt;lt;scriptgt;// 1、export 表示导出,在自定义组件里面使用export default导出 export default { // name 表示设置别名,可以不设置,建议和组件的名称一致 name:"First", data(){ return{ msg:"First Vue" } }}lt;/scriptgt;2、在App.vue组件里面引用First.vue组件

1.at ltscriptgt。使用“导入”在标签中导入自定义标签:

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

2.在导出中添加自定义组件:

// 2、添加自定义组件 components:{ First }

3.At lt模板gt。标签中引入了一个自定义组件:

lt;templategt; lt;div id="app"gt; lt;img src="./assets/logo.png"gt; lt;!-- lt;router-view/gt; --gt; lt;!--3、引用自定义组件--gt; lt;Firstgt;lt;/Firstgt; lt;/divgt;lt;/templategt;

完整的代码如下:

lt;templategt; lt;div id="app"gt; lt;img src="./assets/logo.png"gt; lt;!-- lt;router-view/gt; --gt; lt;!--3、引用自定义组件--gt; lt;Firstgt;lt;/Firstgt; lt;/divgt;lt;/templategt;lt;scriptgt;// 1、导入自定义组件 First即First.vue组件里面设置的name值import First from "./components/First"export default { name: 'App', // 2、添加自定义组件 components:{ First }}lt;/scriptgt;lt;stylegt;#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;}lt;/stylegt;

效果:


二、引入嵌套组件

上例中App.vue只引入了单个组件如何引入嵌套组件?也就是在First.vue组件中引用了自定义组件,那么如何在App.vue组件中引入呢?

1、先定义Second.vue自定义组件:lt;templategt; lt;divgt; lt;h1gt;{{secondMsg}}lt;/h1gt; lt;/divgt;lt;/templategt;lt;scriptgt;export default { // name 表示设置别名,可以不设置,建议和组件的名称一致 name :"Second", data(){ return{ secondMsg:"Second vue" } }}lt;/scriptgt;2、在First.vue组件中引用Second.vue组件

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

lt;templategt; lt;divgt; lt;h1gt;{{msg}}lt;/h1gt; lt;!--3、引用second.vue组件--gt; lt;Secondgt;lt;/Secondgt; lt;/divgt;lt;/templategt;lt;scriptgt;// 1、使用import导入Second.vueimport Second from './Second';// export 表示导出export default { // name 表示设置别名,可以不设置,建议和组件的名称一致 name:"First", data(){ return{ msg:"First Vue" } }, // 2、添加自定义组件组件 components:{ Second }}lt;/scriptgt;3、在App.vue中引入嵌套组件

Second.vue组件引入First.vue后,First.vue组件可以视为一个组件,所以引入App.vue时代码是一样的:

lt;templategt; lt;div id="app"gt; lt;img src="./assets/logo.png"gt; lt;!-- lt;router-view/gt; --gt; lt;!--3、引用自定义组件--gt; lt;Firstgt;lt;/Firstgt; lt;/divgt;lt;/templategt;lt;scriptgt;// 1、导入自定义组件 First即First.vue组件里面设置的name值import First from "./components/First"export default { name: 'App', // 2、添加自定义组件 components:{ First }}lt;/scriptgt;lt;stylegt;#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;}lt;/stylegt;4、效果


这就是这篇关于vue使用脚手架vue-cli创建和引入定制组件的文章。希望对大家的学习有帮助

0

精彩评论

暂无评论...
验证码 换一张
取 消