Skip to content

Commit

Permalink
translate: practice/parent-to-child.md, working on #65 (#86)
Browse files Browse the repository at this point in the history
* translate: practice/parent-to-child.md, working on #65

* Update parent-to-child.md
  • Loading branch information
harttle authored and otakustay committed Nov 28, 2018
1 parent f5b2c9f commit 627afef
Showing 1 changed file with 7 additions and 6 deletions.
13 changes: 7 additions & 6 deletions source/_posts/en/practice/parent-to-child.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
title: 父组件如何更新子组件?
title: How to Update Child Components?
categories:
- practice
---

#### props

最简单的也是最常用的父组件更新子组件的方式就是父组件将数据通过**props**传给子组件,当相关的变量被更新的时候,MVVM框架会自动将数据的更新映射到视图上。
Pass parent data to a child component with **props**, the child component will automatically get updated upon data changes.


```javascript
Expand Down Expand Up @@ -42,7 +42,8 @@ class Parent extends san.Component {
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

#### ref
更灵活的方式是通过**ref**拿到子组件的实例,通过这个子组件的实例可以手动调用`this.data.set`来更新子组件的数据,或者直接调用子组件声明时定义的成员方法。

Actually the reference to the child component can be obtained by the `.ref()` method. Having this reference, we can call `ref.data.set()` or its member methods to update the child component's data.

```javascript
class Son extends san.Component {
Expand All @@ -57,7 +58,7 @@ class Parent extends san.Component {
static template = `
<div>
<input value="{= firstName =}" placeholder="please input">
<button on-click='onClick'>传给子组件</button>
<button on-click='onClick'>Pass to the Child</button>
<ui-son san-ref="son"/>
</div>
`;
Expand All @@ -75,7 +76,7 @@ class Parent extends san.Component {

#### message

除了**ref**外,父组件在接收子组件向上传递的消息的时候,也可以拿到子组件的实例,之后的操作方式就和上面所说的一样了。
Apart from the `.ref()` method, child component's reference can also be found in the event object which is dispatched from the child.

```javascript
class Son extends san.Component {
Expand All @@ -99,7 +100,7 @@ class Parent extends san.Component {
</div>
`;

// 声明组件要处理的消息
// declare the expected message names
static messages = {
'son-clicked': function (arg) {
let son = arg.target;
Expand Down

0 comments on commit 627afef

Please sign in to comment.