wepy组件子父传值_wepy组件间传值

普通组件引用

当页面需要引入组件，或组件需要引入子组件时，必须在.wpy文件的

import wepy from 'wepy';

import Child from '../components/child'; // 引入组件文件

export default class Index extends wepy.component {

components = {

child: Child // 声明组件，分配组件id为child

};

}

组件ID

WePY中的组件都是静态组件，是以组件ID作为唯一标识的，每一个ID都对应一个组件实例。当页面引入两个相同ID的组件时，这两个组件共用同一个实例与数据，当其中一个组件数据变化时，另外一个也会一起变化。

如需避免这个问题，则需要分配多个组件ID和实例。代码如下：

import wepy from 'wepy';

import Child from '../components/child';

export default class Index extends wepy.component {

components = {

//为两个相同组件的不同实例分配不同的组件ID，从而避免数据同步变化的问题

child: Child,

anotherchild: Child

};

}

组件的循环渲染

当需要循环渲染WePY组件时，须使用WePY定义的辅助标签，示例如下：

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'}]

}

}

组件的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中属于父子组件之间传值的一种机制，包括静态传值与动态传值。

1、静态传值

父组件向子组件传递常量数据，只能传递String。

做法：在父组件template模板部分的组件标签中，使用子组件props对象中所声明的属性名，作为其属性名来接收父组件传递的值。

示例：

//* 父组件 template模板部分

//*子组件 childCom.wpy中

props = {

title: String

};

onLoad () {

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

}

2、动态传值

指父组件向子组件传递动态数据内容，父子组件数据完全独立互不干扰。

-可以通过.sync修饰符，来达到父组件数据绑定至子组件的效果；

-也可以通过设置子组件props的twoWay: true，来达到子组件数据绑定至父组件的效果；

-如果既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了。

-在父组件template模板部分所插入的子组件标签中，使用:prop属性，来进行动态传值。

// parent.wpy

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

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)

}

}

}

// child.wpy

Click me

import wepy from 'wepy'

export default class Child extends wepy.component {

methods = {

tap () {

console.log('child is clicked')

this.$emit('childFn', 100)

}

}

}

slot 组件内容分发插槽

作者：Arthur凌

链接：https://www.jianshu.com/p/e30436ba773f

來源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。