wepy组件间传值

普通组件引用

当页面须要引入组件，或组件须要引入子组件时，必须在.wpy文件的<script>部分先import组件文件，而后在components对象中给组件声明惟一的组件ID；接着在<template>模板部分中，添加以组件ID进行命名的自定义标签，以插入组件。

<template>
<!-- 以`<script>`脚本部分中所声明的组件ID为名命名自定义标签，从而在`<template>`模板部分中插入组件 -->
<child></child>
</template>

<script>
import wepy from 'wepy';
import Child from '../components/child'; // 引入组件文件

export default class Index extends wepy.component {

components = {
child: Child // 声明组件，分配组件id为child
};
}
</script>

组件ID

WePY中的组件都是静态组件，是以组件ID做为惟一标识的，每个ID都对应一个组件实例。当页面引入两个相同ID的组件时，这两个组件共用同一个实例与数据，当其中一个组件数据变化时，另一个也会一块儿变化。
如需避免这个问题，则须要分配多个组件ID和实例。代码以下：

<template>
<view class="child1">
<child></child>
</view>

<view class="child2">
<anotherchild></anotherchild>
</view>
</template>

<script>
import wepy from 'wepy';
import Child from '../components/child';

export default class Index extends wepy.component {
components = {
//为两个相同组件的不一样实例分配不一样的组件ID，从而避免数据同步变化的问题
child: Child,
anotherchild: Child
};
}
</script>

组件的循环渲染
当须要循环渲染WePY组件时，须使用WePY定义的辅助标签<repeat>，示例以下：
<template>
<!-- 注意，使用for属性，而不是使用wx:for属性 -->
<repeat for="{{list}}" key="index" index="index" item="item">
<!-- 插入<script>脚本部分所声明的child组件，同时传入item -->
<child :item="item"></child>
</repeat>
</template>

<script>
import wepy from 'wepy';
import Child from '../components/child'; // 引入child组件文件

export default class Index extends wepy.component {
components = {
child: Child
}

data = {
list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}]
}
}
</script>

组件的computed属性
computed计算属性，是一个有返回值的函数，可直接被看成绑定数据来使用。相似于data属性。示例以下：
data = {
aaa: 1
}

// 计算属性aPlus，在脚本中可经过this.aPlus来引用，在模板中可经过{{ aPlus }}来插值
computed = {
aPlus () {
return this.aaa + 1
}
}

watcher监听器
经过监听器watcher，可以监听到任何属性的更新。监听器在watch对象中声明，类型为函数，函数名与须要被监听的data对象中的属性同名，每当被监听的属性改变一次，监听器函数就会被自动调用执行一次。

监听器适用于当属性改变时须要进行某些额外处理的情形。

示例：
data = {
num: 1
}

// 监听器中的监听函数名，必须与其对应的属性名同样
// 参数newValue为属性改变后的新值，oldValue为改变前的旧值
watch = {
num (newValue, oldValue) {
console.log(`num value: ${oldValue} -> ${newValue}`)
}
}

props传值
在WePY中属于父子组件之间传值的一种机制，包括静态传值与动态传值。
一、静态传值
父组件向子组件传递常量数据，只能传递String。
作法：在父组件template模板部分的组件标签中，使用子组件props对象中所声明的属性名，做为其属性名来接收父组件传递的值。
示例：
//* 父组件 template模板部分
<childCom title="mytitle"></childCom >

//*子组件 childCom.wpy中
props = {
title: String
};

onLoad () {
console.log(this.title); // 输出 “mytitle”
}

二、动态传值
指父组件向子组件传递动态数据内容，父子组件数据彻底独立互不干扰。

-能够经过.sync修饰符，来达到父组件数据绑定至子组件的效果；
-也能够经过设置子组件props的twoWay: true，来达到子组件数据绑定至父组件的效果；
-若是既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就能够实现数据的双向绑定了。
-在父组件template模板部分所插入的子组件标签中，使用:prop属性，来进行动态传值。

// parent.wpy

<child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>

data = {
parentTitle: 'p-title'
};

// child.wpy

props = {
// 静态传值
title: String,

// 父向子单向动态传值
syncTitle: {
type: String,
default: 'null'
},

twoWayTitle: {
type: Number,
default: 'nothing',
twoWay: true
}
};

组件通讯与交互
wepy.component基类提供$broadcast、$emit、$invoke三个方法，用于组件之间的通讯和交互。有关的事件处理函数，须要写在组件和页面的events对象中声明。

$broadcast
事件是由父组件发起，全部子组件都会收到此广播事件，除非事件被手动取消。

$emit
由某个子组件发起，其全部祖先组件会依次接收到$emit事件。

示例
this.$emit('some-event', 1, 2, 3, 4);
import wepy from 'wepy'

export default class Com extends wepy.component {
components = {};

data = {};

// 声明
events = {
'some-event': (p1, p2, p3, $event) => {
console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`);
}
};
// Other properties
}

$invoke
是一个页面或组件，直接调用另外一个组件的方法。经过传入组件路径找到相应的组件，而后再调用其方法。

好比：
-想在页面Page_Index中，调用组件ComA的某个方法：
this.$invoke('ComA', 'someMethod', 'someArgs');
-想在组件ComA中，调用组件ComG的某个方法：
this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');
组件自定义本身的事件处理函数
使用.user修饰符，为自定义组件 绑定事件。

如：@customEvent.user="myFn"
其中，@表示事件修饰符，customEvent 表示事件名称，.user表示事件后缀。

示例:
// page.wpy

<template>
<child @childFn.user="parentFn"></child>
</template>

<script>
import wepy from 'wepy'
import Child from '../components/child'

export default class Index extends wepy.page {
components = {
child: Child
}

methods = {
parentFn (num, evt) {
console.log('parent received emit event, number is: ' + num)
}
}
}
</script>

// child.wpy

<template>
<view @tap="tap">Click me</view>
</template>

<script>
import wepy from 'wepy'

export default class Child extends wepy.component {
methods = {
tap () {
console.log('child is clicked')
this.$emit('childFn', 100)
}
}
}
</script>

slot 组件内容分发插槽

做者：Arthur凌连接：https://www.jianshu.com/p/e30436ba773f來源：简书简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。