梅克尔工作室-景绩凡-鸿蒙笔记3

list组件

• Item：ActionScript 对象，通常包含 label 属性和 data 属性，前者是描述性的属性，后者用于存储与项目关联的数据。

• Row ：用于显示项目的组件。

• Data provider：一个组件，用于模拟 List 组件所显示的项目。

父子组件

实现思路：

在app.js定义一个对象结构Hmx存放需要通信的页面或组件的this;

在app.js定义一个注册函数regHmx，通过regHmx(name,hm)将页面或组件的名称和this对象注册到Hmx对象中；

在app.js定义一个获取函数getHmx(name)，通过名称可以获取注册过的页面或组件hm(即是存放的this);

获取后就能修改相应页面或组件的变量了；

export default { onCreate() { console.info('AceApplication onCreate'); }, onDestroy() { console.info('AceApplication onDestroy'); }, Hmx:{}, // 定义一个结构存放需要通信的页面this; regHmx(name,hm){ this.Hmx[name] = hm; // hm即是页面this // 通过注册函数regHmx,可将页面名称和this存放到Hmx; }, getHmx(name){ // 通过函数getHmx,可根据名称获取已注册的页面this return this.Hmx[name]; }};

先看子组件child.hml

{{childtitle}} style="background-color: white;color:green; width: 55%;font-size: 22px;"> 点击向父组件传值

子组件在父页面中使用index.hml

{{title}} | {{txt}}

父页面index.js

export default { data: { title: "父组件", txt:"等待子组件修改", }, onInit() { var _this = this; this.$app.$def.regHmx("index",_this); //将页面this注册到app中的Hmx结构中 }}

最后再看child.js

export default { data(){ return { childtitle:"子组件" } }, onInit() { // 此处修改也可以生效// var indexHm = this.$app.$def.getHmx("index");// indexHm.txt = "child发来了信息"; }, sendVar(){ //通过getHmx 获取父页面的对象 var indexHm = this.$app.$def.getHmx("index"); // 利用获取的对象直接修改 indexHm.txt = "点击再次传值";

if-else渲染

v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truth值的时候被渲染。 v-else和v-else-if都必须紧跟在v-if的后面使用（v-else-if可以跟在v-else-if后面）

for循环渲染

v-for指令可以将一个数组渲染成一个列表

v-for指令将一个对象渲染成一个列表

1，正常的列表渲染:

1，v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items是源数据的数组，而 item 是迭代项的别名。

2，在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。

2，v-for用来遍历对象:

也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。
第一个参数是属性值
第二个参数表示属性名
第三个参数表示索引值
注意：当只写一个参数的时候，默认是属性值