translate practice/child-to-grandparent (#100)

source/_posts/en/practice/child-to-grandparent.md

@@ -1,49 +1,49 @@
 ---
-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 = `
         <div>
-            <button on-click='onClick'>向上传递</button>
+            <button on-click='onClick'>pass up</button>
         </div>
     `;
 
     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 = '<div><slot></slot></div>';
 
-    // 声明组件要处理的消息
+    // 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);
 
         }
     }
 };
 ```
 
-#### 示例
+#### examples
 
 <p data-height="265" data-theme-id="0" data-slug-hash="oeBmvZ" data-default-tab="js,result" data-user="jiangjiu8357" data-embed-version="2" data-pen-title="higher-communication" class="codepen">See the Pen <a href="https://codepen.io/jiangjiu8357/pen/oeBmvZ/">higher-communication</a> by Swan (<a href="https://codepen.io/jiangjiu8357">@jiangjiu8357</a>) on <a href="https://codepen.io">CodePen</a>.</p>
 <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script><script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script><script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script><script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>