Skip to content

translated components-registration #700

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 4 commits into from
Apr 16, 2018
Merged

translated components-registration #700

merged 4 commits into from
Apr 16, 2018

Conversation

Jinjiang
Copy link
Member

@Jinjiang Jinjiang commented Apr 7, 2018

No description provided.

@Jinjiang Jinjiang requested a review from Justineo April 7, 2018 21:34

该组件名就是 `Vue.component` 的第一个参数。

你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (相对于在字符串模板或[单文件组件](single-file-components.html)) 的时候,我们强烈推荐遵循 [W3C 规范](https://www.w3.org/TR/custom-elements/#concepts)中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。
Copy link
Member

Choose a reason for hiding this comment

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

相对于 → 而不是

这样感觉通一些?


你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (相对于在字符串模板或[单文件组件](single-file-components.html)) 的时候,我们强烈推荐遵循 [W3C 规范](https://www.w3.org/TR/custom-elements/#concepts)中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

你可以在[风格指南](../style-guide/#基础组件名-强烈推荐)查阅到关于组件名的其它建议。
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.

定义组件名有两种方式?

Copy link
Member Author

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.

OK

Vue.component('MyComponentName', { /* ... */ })
```

当使用 PascalCase (驼峰式命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 `<my-component-name>` 和 `<MyComponentName>` 都是可接受的。注意,尽管如此,直接在 DOM (比如非字符串的模板) 中使用时只有 kebab-case 是有效的。
Copy link
Member

Choose a reason for hiding this comment

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

比如 → 即


## 全局注册

现在,我们只是通过 `Vue.component` 创建来组件:
Copy link
Member

Choose a reason for hiding this comment

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

到目前位置,我们只用过 Vue.component 来创建组件:

Copy link
Member Author

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.

我是觉得“到目前为止”是承接之前说的内容,“现在”是不是偏重当前的时间点了?

Copy link
Member Author

Choose a reason for hiding this comment

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

个人觉得差别不是很明显……
不过我不介意用“到目前为止”,我改一下好了:)

}
```

或者如果你通过 Babel 和 webpack 使用 ES2015 modules,那么代码看起来更像:
Copy link
Member

Choose a reason for hiding this comment

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

ES2015 模块?


## 模块系统

如果你没有通过 `import`/`require` 使用一个模块系统,你现在可能可以跳过这个章节了。如果你使用了,那么我们会为你提供一些特殊的使用说明和注意事项。
Copy link
Member

Choose a reason for hiding this comment

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

你也许可以暂且跳过这个章节?


### 基础组件的自动化全局注册

可能你的许多组件只是包裹了一个输入框或按钮之类的元素,是相对通用的。我们有的时候会把它们称为[基础组件](../style-guide/#基础组件名-强烈推荐)并且它们会频繁的被你的组件用到。
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.

而只是用于模板中的一小部分?这样感觉和前半句连贯一些

</BaseButton>
```

庆幸的是,如果你使用了 webpack (或内置了 webpack 的 [Vue CLI 3+](https://github.com/vuejs/vue-cli)),你就可以使用 `require.context` 只全局注册这些非常通用的基础组件。这里有一份可以让你在应用入口文件 (比如 `src/main.js`) 中全局导入基础组件的示例代码:
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.

“内置”感觉不太对?“或是在内部使用了 webpack 的 Vue CLI 3+”?

Copy link
Member

Choose a reason for hiding this comment

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

去掉第二个“你”

@Jinjiang Jinjiang merged commit 2e418f2 into master Apr 16, 2018
@Jinjiang Jinjiang deleted the components-reg branch April 16, 2018 16:14
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