美文网首页Weex
weex 组件通信

weex 组件通信

作者: 有情怀的程序猿 | 来源:发表于2017-02-24 14:30 被阅读1375次
官方文档中其实就有介绍组件通信, 我这里写下我自己的理解

1: 定义一个方法:
可以在任何组件中定义方法:

this.$on(type, handler)

type: 是监听的自定义事件类型(官方解释) , 我认为是你给方法起个标示的名字,在其他地方可以获取到(了解的不够深, 说错了麻烦纠正下)
handler: 事件处理函数, 事件处理函数中第一个参数是事件对象$event, 详见我的数据绑定

2: 其他的 ViewModel 中获取这个方法, (此 ViewModel 中必须引用该组件)

xxx.$emit(type, detail);    //调用某某组件中的方法(type)

1: xxx , 指的是定义方法的组件,
2: detail, 是需要传入的值

  • 格式:
    • 字符串(比如图片路径);
    • 对象或者数组(传数字), 接受时需要JSON转换 this.eventDetail = JSON.stringify(event.detail)

xxx获取组件的方式

  • 子级ViewModel 获取父级组件 使用this._parent
    <element name="foo">
    <template>
      <div>
        <image src="{{imageUrl}}" class="thumb" onclick="test"></image>
        <text>{{title}}</text>
      </div>
    </template>
    <style>
      .thumb { width: 200; height: 200; }
    </style>
    <script>
      module.exports = {
        data: {
          title: '',
          imageUrl: ''
        },
        methods: {
          test: function () {
            // Emit notify to parent
            this._parent.$emit('notify', {a: 1})
          }
        }
      }
    </script>
    

</element>
<template>
<div>
<foo title="Hello" image-url="https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png"></foo>
<text if="eventType">event: {{eventType}} - {{eventDetail}}</text>
</div>
</template>
<script>
module.exports = {
data: {
eventType: '',
eventDetail: {}
},
created: function () {
this.$on('notify', function(event) {
// When a notify comes, this handler will be run.
// event.detail will be {a: 1}
this.eventType = event.type
this.eventDetail = JSON.stringify(event.detail)
})
}
}
</script>

- 父级往子集传值
父级中引用了子集, 需要子组件的id

this.$vm(id).$emit(type, detail)

id为子集的id 类似获取节点

<element name="foo">
<template>
<div>
<image if="imageUrl" src="{{imageUrl}}" class="thumb"></image>
<text>Foo</text>
</div>
</template>
<style>
.thumb { width: 200; height: 200; }
</style>
<script>
module.exports = {
data: {
imageUrl: ''
},
created: function() {
this.$on('changeImage', function (e) {
this.imageUrl = e.detail
}.bind(this))
}
}
</script>
</element>
<template>
<div>
<foo id="sub"></foo>
<text onclick="test">click to update foo</text>
</div>
</template>
<script>
module.exports = {
methods: {
test: function (e) {
this.$vm('sub').$emit(
'changeImage',
'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png'
)
}
}
}
</script>

相关文章

  • weex 组件通信

    官方文档中其实就有介绍组件通信, 我这里写下我自己的理解 1: 定义一个方法:可以在任何组件中定义方法: type...

  • Weex语法——组件之间通信

    子-父 通信 子组件可以使用this.$dispatch([String type], [Object detai...

  • Weex富文本WXRichLabel实践

    在上篇的基础上处理: Weex自定义WXRichText组件实践Weex 富文本 Weex协议 Weex链接 WX...

  • Android架构组件实现MVVM模式的应用

    Image组件 weex的list组件和image组件非常容易出问题,企鹅电竞本身又存在很多无限列表的weex页面...

  • vue中的组件通信

    一、组件通信(组件传值) 1.1父子组件通信 1.2子父组件通信 1.3非父子组件通信(兄弟组件通信)

  • 组件通信

    组件通信分为几种: 父组件给子组件通信 子组件给父组件通信 兄弟组件通信 1.父组件给子组件通信 法一...

  • 组件通信

    组件关系 组件关系可以分为父子组件通信、兄弟组件通信、跨级组件通信。 父子组件通信 1. 子组件使用 $emit(...

  • (26)打鸡儿教你Vue.js

    weex框架的使用 1、weex开发入门2、weex开发环境搭建3、掌握部分weex组件模块4、了解一些vue基本...

  • react之组件通信

    需要组件之进行通信的几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 ...

  • React组件通信的几种方式

    需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1...

网友评论

  • PGOne爱吃饺子:楼主,weex的组件通信是不是不能用了,你给的那个地址怎么打不开了

本文标题:weex 组件通信

本文链接:https://www.haomeiwen.com/subject/rnsuwttx.html