Skip to content

translated components-props.md #702

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 26, 2018
Merged

translated components-props.md #702

merged 2 commits into from
Apr 26, 2018

Conversation

Jinjiang
Copy link
Member

@Jinjiang Jinjiang commented Apr 8, 2018

No description provided.


## 静态的和动态的 Prop

现在,你已经知道了可以想这样给 prop 传入一个静态的值:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

像这样

### 传入一个布尔值

```html
<!-- 包含该 prop 没有任何值的时候都意味着 `true`。-->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

包括 prop 没有值的情况在内,都意味着 true


### 传入一个对象的所有属性

如果你想要讲一个对象的所有属性都作为 prop 传入,你可以使用不带参数的 `v-bind` (取代 `v-bind:prop-name`)。例如,对于一个给定的对象 `post`:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

讲 → 将


## 单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个**单向下行绑定**:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

后面两个 prop 原文是 property,我们翻译么?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我理解是等价的吧,所以直接换成了 prop

}
```

2. **这个 prop 以一种原始的值传入且需要做二次加工。**在这种情况下,最好使用这个 prop 的值来定义一个计算属性:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

需要进行转换?

- `Array`
- `Symbol`

额外的,`type` 还可以是一个自定义的构造函数,并且其验证方式内部是通过 `instanceof` 来断言的。例如,给定下列现成的构造函数:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

并且通过 instanceof 来进行检查确认?


一个非 prop 特性是指传向一个组件,但是该组件并没有相应 prop 定义的特性。

因为显性定义的 prop 适用于向一个子组件传入信息,组件库的作者无法永远预见到组件使用时的上下文。这也是为什么组件可以接受任意的特性,而这些特性会被添加到这个组件的根元素上。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

显式

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

显性定义的 prop 适用于向一个子组件传入信息,然而组件库的作者并不总能预见组件使用时的上下文(组件会被用于怎样的场景)?

<input type="date" class="form-control">
```

为了给我们的日期选择器插件定制一个主题,我们可能需要像这样添加一个特别的 class:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

类名/`class`

})
```

尤其是它可以和实例的 `$attrs` 属性结合使用,该属性包含了传递给一个组件的特性名和特性值,例如:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这尤其适合配合实例的 $attrs 属性使用?

})
```

这个模式运行你在使用基础组件的时候更像是使用原始的 HTML 元素,而不会担心哪个元素是真正的根元素:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

运行 → 允许

@Justineo Justineo merged commit 570019b into master Apr 26, 2018
@Jinjiang Jinjiang deleted the components-props branch April 26, 2018 13:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants