vue.cli怎样使用自定义组件,使用vue-cli创建项目
本文介绍了vue使用scaffolding vue-cli创建和引入定制组件的方法，并通过示例代码进行了详细介绍。对大家的学习或者工作都有一定的参考价值，有需要的朋友可以参考一下。
一、创建并引入一个组件
1、创建组件
vue-cli中的所有组件都存储在components文件夹下，因此在components文件夹下创建一个名为First.vue的自定义组件：
模板
差异
h1{{msg}}/h1
/div
/模板
脚本
//1，export表示导出，自定义组件中使用导出默认。
导出默认值{
//name表示设置别名，可以设置也可以不设置。建议与组件的名称一致。
姓名：名字，
data(){
返回{
消息：“第一个Vue”
}
}
}
/脚本
2、在App.vue组件里面引用First.vue组件
1.使用导入在脚本标签中导入自定义标签:
//1.首先导入自定义组件中设置的名称值，即First.vue组件。
首先从导入。/组件/优先
2.在导出中添加自定义组件：
//2.添加自定义组件
组件：{
第一
}
3.在模板标签中引入自定义组件：
模板
div id=应用程序
img src=。/assets/logo.png
！-路由器-视图/-
！-3.引用自定义组件-
第一/第一
/div
/模板
完整的代码如下：
模板
div id=应用程序
img src=。/assets/logo.png
！-路由器-视图/-
！-3.引用自定义组件-
第一/第一
/div
/模板
脚本
//1.首先导入自定义组件中设置的名称值，即First.vue组件。
首先从导入。/组件/优先
导出默认值{
名称：“应用程序”，
//2.添加自定义组件
组件：{
第一
}
}
/脚本
风格
#app {
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit-font-smoothing:抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
效果：
二、引入嵌套组件
上例中App.vue只引入了单个组件如何引入嵌套组件？也就是在First.vue组件中引用了自定义组件，那么如何在App.vue组件中引入呢？
1、先定义Second.vue自定义组件：
模板
差异
h1{{secondMsg}}/h1
/div
/模板
脚本
导出默认值{
//name表示设置别名，可以设置也可以不设置。建议与组件的名称一致。
姓名：第二，
data(){
返回{
secondMsg:“第二个vue”
}
}
}
/脚本
2、在First.vue组件中引用Second.vue组件
在First.vue中引用Second.vue组件和在App.vue中引入First.vue组件是一样的完整代码如下：
模板
差异
h1{{msg}}/h1
！-3，引用second.vue组件-
秒/秒
/div
/模板
脚本
//1，用import导入Second.vue
从导入第二个。/秒；
//export就是导出的意思。
导出默认值{
//name表示设置别名，可以设置也可以不设置。建议与组件的名称一致。
姓名：名字，
data(){
返回{
消息：“第一个Vue”
}
},
//2.添加自定义组件。
组件：{
第二
}
}
/脚本
3、在App.vue中引入嵌套组件
Second.vue组件引入First.vue后，First.vue组件可以视为一个组件，所以引入App.vue时代码是一样的：
模板
div id=应用程序
img src=。/assets/logo.png
！-路由器-视图/-
！-3.引用自定义组件-
第一/第一
/div
/模板
脚本
//1.首先导入自定义组件中设置的名称值，即First.vue组件。
首先从导入。/组件/优先
导出默认值{
名称：“应用程序”，
//2.添加自定义组件
组件：{
第一
}
}
/脚本
风格
#app {
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit-font-smoothing:抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
4、效果
这就是这篇关于vue使用脚手架vue-cli创建和引入定制组件的文章。希望对大家的学习有帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。