文档翻译 - 组件间通信 (Communicate Between Components)

[nicefe]

组件间通信

0.4

子组件向父组件通信

子组件能通过 this.$dispatch([String type], [Object detail]) 方法向父组件传送数据。第一个参数代表数据类型(个人理解应该是叫通信事件名更好理解) , 第二个参数则是数据对象。如果子组件的某个父组件通过$on([String type], [Function callback])方法注册了一个相同名字的属性监听，那么callback函数将得到一个参数对象，并且参数对象的detail属性值为子组件传递出来的数据对象。

eg:

<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) {
        //  当图片元素<foo>被点击时，触发回调函数
        // e.detail 值为  `{a: 1}`
      })
    }
  }
</script>

父组件向子组件通信

父组件能通过this.$([String id]) 获取子组件的上下文，你能通过这个上下文对象修改子组件相关信息。

eg:

<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>

[zjnxyz]

父组件向多个子组件通信 部分 使用的两个 foo 组件，应该一个foo，一个bar吧

[fbzhang0513]

@zjnxyz foo中也有包含bar的，所以还是属于子节点的

[shbIOS]

拷贝上述代码,完善template里面的组件,报错: Uncaught RangeError: Maximum call stack size exceeded,
之后修改使用不同的数据类型(通信事件名),即可成功通信,望修改文档 @nicefe

[Jinjiang]

@shbIOS 先简单确认一下文件名和自定义标签名字是不是同名了，这样依赖判断会产生无限循环

[jiangfei891111]

兄弟组件通信的这个demo都不全，怎么测试啊

[rox0008]

这几个例子根本跑不通呀，连imageUrl和image-url都没有对应起来

[DoranYun]

@shbIOS @jiangfei891111
感谢反馈，新文档对示例做了优化，可以参考 http://alibaba.github.io/weex/cn/doc/syntax/comm.html

[DoranYun]

@rox0008 感谢反馈，新文档已经修复 http://alibaba.github.io/weex/cn/doc/syntax/comm.html