harmonyOS的自定义组件、引入调用及传值

这里我强调一句如果有vue开发基础的很好理解,跟vue及其相似

组件引入通过element,它有两个属性src和name
src: 组件路径
name: 自定义组件名,不写用默认的文件名,写了覆盖文件名使用
组件的引入一定是写在.hml文件的最上层

1. 父子组件传值数据流往下流就是了,通过props接收,eg:

父组件B.hml
// 引入子组件b.hml
<element src="../xxx/xxx/b.hml",  name="Child"></element>

// 调用子组件
<b tagVal="{{tagVal}}" tagType="1"></b>
or
<Child tagVal="{{tagVal}}" tagType="1" @delData="delFn"></Child>

// 子组件接收
b.js 
props: {
	tagVal: '',
	tagType: null
}

2. 子父组件,通过自定义事件传值==@xxx(xxx为自定义事件),子组件发射this.$emit(xxx, value[string, array])==;

父组件B.hml
// 引入子组件b.hml
<element src="../xxx/xxx/b.hml",  name="Child"></element>

// 调用子组件, 完成自定义事件绑定
<b @delData="delFn"></b>
or
<Child @delData="delFn"></Child>
// B.js接收子组件的发射的数据
data: {
	val: 1
},
delFn(e) {
	this.val = e.detail; (传过来的值是对象是多一级, e.detail.xx)
}

// 子组件接收事件函数及数据发射
// b.hml内部
<button grap:click="delFn"></button>
// b.js  发射数据
delFn() {
	this.$emit('delData',  111)
}

多个组件父子传值还是子父传值都是同样的原理层层传props或者自定义事件