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

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

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

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

-可以通过.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
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

原文地址:https://www.cnblogs.com/mapsxy/p/10404494.html

时间: 2024-10-06 20:02:47

wepy组件间传值的相关文章

非父子组件间传值(一)

非父子组件间传值有两种方法,一种是vuex共享数据,另一种是发布订阅模式/观察者模式/总线/Bus.这篇随笔主要总结总线机制的学习心得: 首先通过在Vue.prototype上挂载一个bus属性,指向vue实例:接下来在调用Vue或者创建组件时都会有bus属性. Vue.prototype.bus=new Vue() var Child={ props:['content'], data:function() { return {num:this.content} }, //因为vue是单项数据

vue组件间传值

父组件向子组件传递数据 // 父组件传递 <dialogAttendee :dialogcascaderVisible="dialogcascaderVisible"></dialogAttendee> // 子组件接接收 props:{ dialogcascaderVisible: { type: Boolean, default: false }, reservation: Array, } 父组件改变子组件中的数据 // 父组件中引用子组件 <son

vue的父子组件间传值以及非父子间传值

Vue组件间的传值方式: 父传子 子传父 非父子间传值 1.首先父组件传值给子组件,使用bind绑定属性,然后在子组件用props接收属性值. //父组件 <template> <input type="text" /> <br/> <child :inputValue="inputValue"></child> </template> <script> import child f

Vue组件间传值 v-model

使用过Vue的同学应该都了解组件之间传值 父组件 --> 子组件 : props 子组件 --> 父组件 : 事件 其实有一种更为简单的方法,是基于上述两种方法,那就是 v-model 我们都在表单中使用过 v-model 来绑定数据,其实组件之间也是可以用 v-model 进行双向绑定的 我们来了解一下 v-model 的原因 <input type="text" v-model="message" /> <!--其实上面这种写法只是

vue和react之间关于注册组件和组件间传值的区别

注册组件 Vue中:1.引入组件:2.在components中注册组件:3.使用组件; React中:1.引入组件:2.使用组件; 子父传值 Vue中: 父组件向子组件传值: 1.在父组件中绑定值:2.子组件通过在props中接收值:3.正常使用; 子组件向父组件传值 1.子组件通过this.$emit订阅:2.父组件通过v-on监听: React中: 父组件向子组件传值: 1.在父组件中直接写值:2.在子组件中通过this.props.接收值: 子组件向父组件传值: (方法一) 1.给子组件定

Vue中兄弟组件间传值-(Bus/总线/发布订阅模式/观察者)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="root"> <child content="Nay"></child> &

非父子组件间的传值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title> <script src="./vue.js"></script> </head> <body> <div

Vue2.0 实战项目(五) 组件间通信的方法

Vue组件之间通信分为三种情况:父组件向子组件通信.子组件向父组件通信.兄弟组件间通信. 一.父组件向子组件通信 通过props可以将值传递给子组件 <!-- 父组件 --><template> <div id="app"> <!-- 父子组件间通信 --> <child :message="toChildMsg"></child> </div> </template>

父子组件间的传值

父子组件间通信 父组件-->子组件 1.父组件通过给子组件添加属性给子组件传值,子组件通过props来接受. 2但是要在属性前加“:”,即使用v-bind指令,才能使属性值是js代码,不然就是字符串. 3.单项输出流.即子组件不允许修改父组件传递的值,只能使用,不能修改. 父组件通过属性向子组件传值时,如果传递的是引用型的值,这时候子组件对父组件传递的值进行修改可能会影响其他子组件对这个引用类型值的使用. 解决办法:子组件在data项中新赋值父组件的变量,操作新的变量即可. 子组件-->父组件