04 vue - 单文件组件定义与使用

系列文章导航

01 Vue语法基础

02 vue数据绑定与指令

03 vue组件技术

04 vue单文件组件定义与使用

---

1 单文件组件的好处

2 单文件组件的运行场景hbuilderx工具

一下两种方式创建的项目才允许使用单文件组件：

1）方式1：Vue项目(含vue-cli)

2）方式2：uni-app项目

 

3 组件的定义与使用

3.1 组件的定义语法规范

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

3.2 组件的使用语法规范

1、引用依赖的组件
import 组件名称 from "../../components/组件名.vue";
2、导出本组件时声明依赖的组件
export default{
    components:{
        组件名称
    },
}
3、在试图模板中使用组件
<组件名称 组件属性="对应的值">

4 vue项目单文件组件代码实例

4.1  文件结构

4.2 组件定义myComponent.vue

 

4.3 组件使用app.vue

 

4.4 运行效果

5 uni-app单文件组件代码实例

5.1 文件结构

5.2 组件定义myComponent.vue

5.3 组件的使用index.vue

5.4 运行效果

 

 

---

欢迎阅读，有错误请留言指正。