From 82c19521848eab74a2ef62b0c3bde8347cb93e3b Mon Sep 17 00:00:00 2001 From: Chen Zhouji Date: Fri, 18 Jan 2019 10:56:07 +0800 Subject: [PATCH] translate practice/child-to-grandparent (#100) --- .../en/practice/child-to-grandparent.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/source/_posts/en/practice/child-to-grandparent.md b/source/_posts/en/practice/child-to-grandparent.md index 317f097..f627c88 100644 --- a/source/_posts/en/practice/child-to-grandparent.md +++ b/source/_posts/en/practice/child-to-grandparent.md @@ -1,41 +1,41 @@ --- -title: 子组件与更高层组件如何通信? +title: How child components communicate with higher layer components categories: - practice --- -#### 使用 +#### usage -子组件通过**dispatch**方法向组件树上层派发消息。 +The child component dispatches messages to the upper layer of the component tree via the **dispatch** method. ```javascript class Son extends san.Component { static template = `
- +
`; onClick() { const value = this.data.get('value'); - // 向组件树的上层派发消息 + // Distribute messages to the upper level of the component tree this.dispatch('son-clicked', value); } }; ``` -消息将沿着组件树向上传递,直到遇到第一个处理该消息的组件,则停止。通过 **messages** 可以声明组件要处理的消息。**messages** 是一个对象,key 是消息名称,value 是消息处理的函数,接收一个包含 target(派发消息的组件) 和 value(消息的值) 的参数对象。 +The message will be passed up the component tree until it encounters the first component that processes the message. Use **messages** to declare the message the component will process. **messages** is an object, the key is the name of a message, and value is the processing function of a message, which receives an object parameter containing `target` (the component that dispatches the message) and `value`(the value of the message). ```javascript class GrandParent extends san.Component { static template = '
'; - // 声明组件要处理的消息 + // Declare messages that the component will process static messages = { 'son-clicked': function (arg) { - // arg.target 可以拿到派发消息的组件 - // arg.value 可以拿到派发消息的值 + // arg.target can get the component dispatched by the message + // arg.value can get the value of the message this.data.set('value', arg.value); } @@ -43,7 +43,7 @@ class GrandParent extends san.Component { }; ``` -#### 示例 +#### examples

See the Pen higher-communication by Swan (@jiangjiu8357) on CodePen.