[威廉希尔官方网站讨论]

【RISC-V 生态软件系列】 HaaS UI基础教学七：第一个自定义组件

2022-3-9 06:53:30 2456 视觉 RISC-V 组件

0 名词解释 AliOS Things：阿里云智能IoT团队自研的物联网操作系统 HaaS：全称是Hardware as a Service，阿里云智能IoT团队基于AliOS Things系统推出的硬件即服务 HaaS UI：全称是Hardware as a Service User Interface，是源自AliOS Things操作系统上的一套应用&图形解决方案，支持C/C++和 JS两种开发语言 Vue组件前面已经介绍过通过HaaS UI内置的组件库来搭建页面，而组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素（在HaaS UI里就是扩展基础组件库），封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用。几乎任意类型的应用的界面都可以抽象为一个组件树：自定义组件 Vue.js注册自定义组件支持全局组件和局部组件，全局组件是指在页面入口统一注册，所有组件都能使用，局部组件是在需要使用的地方进行注册。目前HaaS UI支持局部组件注册。注册一个自定义组件的方法：组件Prop prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"： Prop类型属性类型type可以是下面原生构造器： String Number Boolean Array Object Date Function Symbol 也可以是一个自定义构造器，使用 instanceof 检测。动态Prop 组件prop也可以使用动态绑定方式传递，类似于用 v-bind 绑定到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：第一个自定义组件根据上面介绍的相关内容，搭建一个自定义组件child.vue：父组件容器：运行效果如下：扩展一个Switch组件了解了如何扩展一个自定义组件，我们开始尝试扩展一个更加实用的switch组件，这个组件一般用于做开关控制，是一个非常常用的组件。效果如下： Switch组件直接上代码：以上，为switch组件定义了6个属性 colorChecked：组件选中态的背景颜色 colorNormal：组件未选中时的默认背景色 colorButton：switch中间圆球的颜色 width：组件整体宽度 height：组件整体高度 checked：默认的选中态true/false 以及通过v-model支持checked属性的双向数据绑定，可用于与父组件的变量绑定。并通过transition样式为组件提供切换动效。使用Switch组件以上实现了一个Switch组件，接下来就可以在任意页面或者组件中引进来使用了。使用方法就是上面介绍的先import进来，然后注册到vue里面就行。通过以下方法，就可以实现上面动图的效果：更多用法 switch组件中定义了一些可定制的属性，在使用时就可以按照组件属性的方式来定制switch显示的样式和事件了： 0
2022-3-9 06:53:30　　评论淘帖0 举报相关推荐 • 【RISC-V 生态软件系列】 HaaS UI基础教学六：第一个自定义JSAPI 2341 • 【RISC-V 生态软件系列】 HaaS UI基础教学二：第一个UI页面搭建 2837 • 【RISC-V 生态软件系列】 HaaS UI基础教学一：快速开始 4153 • 【RISC-V 生态软件系列】 HaaS UI基础教学八：JSAPI自动化测试方法 3710 • 【RISC-V 生态软件系列】 HaaS UI基础教学十：JSAPI之IoT平台连接 2204 • 【RISC-V 生态软件系列】 HaaS UI基础教学九：JSAPI之应用包管理 1823 • 【RISC-V 生态软件系列】 HaaS UI进阶教学三：Canvas之动画实践 3290 • 【RISC-V 生态软件系列】 HaaS UI基础教学三：JSAPI之页面导航 2529 • 【RISC-V 生态软件系列】HaaS UI进阶教学五：使用QuickJS原生方式扩展JSAPI（一）添加JSAPI模块 2615 • RISC-V自定义计算 – 构建您的抱负 0