This repository was archived by the owner on Jun 6, 2019. It is now read-only.
This repository was archived by the owner on Jun 6, 2019. It is now read-only.
组件之间通信 - (Communicate Between Components) #16
Open
Description
新版中文网站及文档已经上线,请访问 https://weex-project.io/cn/ , 此处后续不再维护,谢谢理解。
子-父 通信
子组件可以使用this.$dispatch([String type], [Object detail])
方法传递消息给父组件。
第一个参数定义消息类型,第二个参数为消息对象。如果父组件中的任何子组件使用$on([String type], [Function callback])
注册监听事件,则回调执行第一个参数,参数中的 detail
属性是消息数据。
案例:
<we-element name="foo">
<template>
<div>
<image src="{{imageUrl}}" onclick="test"></image>
<text>{{title}}</text>
</div>
</template>
<script>
module.exports = {
data: {
title: '',
imageUrl: ''
},
methods: {
test: function () {
this.$dispatch('notify', {a: 1})
}
}
}
</script>
</we-element>
<template>
<foo title="..." image-url="..."></foo>
</template>
<script>
module.exports = {
created: function () {
this.$on('notify', function(e) {
// when <foo> image tag be clicked ,the function will be executing.
// e.detail is `{a: 1}`
})
}
}
</script>
父 - 子 通信
父组件可以使用 this.$([String id])
来获取子组件的上下文。你可以使用上下文对象访问子组件的信息。
<we-element name="foo">
<template>
<div>
<image src="{{imageUrl}}"></image>
<text>{{title}}</text>
</div>
</template>
<script>
module.exports = {
data: {
title: '',
imageUrl: ''
},
methods: {
setTitle: function (t) {
this.title = t
}
}
}
</script>
</we-element>
<template>
<div>
<text onclick="test">click to update foo</text>
<foo id="fooEl" title="..." image-url="..."></foo>
</div>
</template>
<script>
module.exports = {
methods: {
test: function (e) {
var foo = this.$('fooEl')
foo.setTitle('...')
foo.imageUrl = '...'
}
}
}
</script>
父 - 子(多子)通信
父组件可以使用this.$broadcast([String type], [Object detail])
广播消息给所有子组件。
案例:
<we-element name="bar">
<template>
<div>
<image src="{{imageUrl}}"></image>
</div>
</template>
<script>
module.exports = {
data: {
imageUrl: ''
},
created: function() {
var self = this
this.$on('changeImage', function(e) {
self.imageUrl = e.detail.imageUrl
})
}
}
</script>
</we-element>
<we-element name="foo">
<template>
<div>
<bar></bar>
<text>{{title}}</text>
</div>
</template>
<script>
module.exports = {
data: {
title: ''
},
created: function() {
var self = this
this.$on('changeTitle', function(e) {
self.title = e.detail.title
})
}
}
</script>
</we-element>
<template>
<div>
<text onclick="test">click to update foo</text>
<foo></foo>
<foo></foo>
</div>
</template>
<script>
module.exports = {
methods: {
test: function (e) {
this.$broadcast('changeTitle', {
title: '...'
})
this.$broadcast('changeImage', {
imageUrl: '...'
})
}
}
}
</script>
兄弟间通信
兄弟组件间通过公共的父组件作为桥梁来传递消息。
案例:
<we-element name="foo">
<template>...</template>
<script>
module.exports = {
methods: {
callbar: function () {
this.$dispatch('callbar', {a: 1})
}
}
}
</script>
</we-element>
<we-element name="bar">
<template>...</template>
<script>
module.exports = {
created: function() {
this.$on('callbar', function(e) {
// e.detail.a
})
}
}
</script>
</we-element>
<template>
<div>
<foo></foo>
<bar></bar>
</div>
</template>
<script>
module.exports = {
created: function () {
var self = this
this.$on('callbar', function(e) {
self.$broadcast('callbar', e.detail)
})
}
}
</script>
最后,你将学习怎么给Weex页面写 配置 & 数据
Activity
emptywalker commentedon Aug 12, 2016
<we-element name="foo">
这个标签是什么意思sandy53 commentedon Aug 12, 2016
@emptywalker
这个标签应该是自定组件的意思,可以看下组件封装这个文档
#2
mrKylinZhou commentedon Aug 23, 2016
自定义组件显示不出来啊 组建封装的例子和这节课的例子都好蒙啊
新东西 希望能解释一下
ruohuan commentedon Aug 23, 2016
“如果父组件中的任何子组件使用……”,应该是“在子组件的父组件中通过
$on([String type], [Function callback])
注册事件监听……”吧ruohuan commentedon Aug 23, 2016
@emptywalker
<we-element name="foo">XXX</we-element>
的意思是中间的XXX
这部分是foo组件代码,因为把子组件都写在一个.we
文件里面了,如果不这么设置,文件里如果有多个组件,就会出现同级多个template
,多个style
和多个script
如果foo组件的代码放在单独的foo.we文件里面,就不需要写
<we-element name="foo">XXX</we-element>
,直接写<template>...</template><style>...</style><script>...</script>
即可应该是这么理解的,哈哈
emptywalker commentedon Sep 10, 2016
ths @sandy53 @ruohuan
obetame commentedon Sep 26, 2016
我把子组件写到单独的.we文件里,为何无法和父组件通信?
而且自带的wx-tabbar组件不支持子组件,难道需要自己实现?或者有其他的方法?
AlenGao commentedon Oct 8, 2016
@sandy53 你觉得你给的答案 是人家想要的吗
AlenGao commentedon Oct 8, 2016
@ruohuan 你这样理解的你自己试过吗
AlenGao commentedon Oct 9, 2016
兄弟组建之间的通信,父组建的js代码:
module.exports = {
created: function () {
var self = this
this.$on('callbar', function(e) {
self.$broadcast('callbar', e.detail)
})
}
}
这段代码貌似有问题,广播后父组建也能监听到会陷入死循环造成越界错误
events.js:39 Uncaught RangeError: Maximum call stack size exceeded
所以感觉$broadcast第一个参数不能和父组建监听的消息类型一样。
codercuixin commentedon Oct 12, 2016
@Tancy
但是点击图片之后,控制台会出现TypeError: fn is undefine
不知道什么原因呢。谢谢了麻烦帮忙看下
colys commentedon Oct 17, 2016
Tab里面怎么不能用父子通信?
codercuixin commentedon Oct 23, 2016
有些涉及图片的代码,建议个人使用的时候加上
<image style="width:200;height:200" src="{{imageUrl}}"></image>
,图片的width,heght都是图片的基本属性,不加图片会显示不出来。这些都是基础 的,作者就没写可能。codercuixin commentedon Oct 23, 2016
@Tancy @emptywalker @sandy53 @mrKylinZhou @ruohuan
兄弟间通信.参数传递问题
为了不进入死循环(即main.we里既广播事件又监听事件),更改了名称,使得foo控件可以发布事件;在main.we使用on监听该事件,收到该事件再发出广播,然后再bar.we对该事件进行监听,然而参数传递还是有问题。。。。
使用上面的参数传递方式也有问题,自己改了一下。然而控制台输出
Object { a=1}
undefined ;
请问如何解决,谢谢了。
代码如下:
Security111588 commentedon Oct 25, 2016
最后的链接404,目前是这个:#9
16 remaining items