Vue 3.0 组件基础 【Vue3 从零开始】

基本实例

这里有一个 Vue 组件的示例：

1. // 创建一个Vue 应用
2. const app = Vue.createApp({})
5. // 定义一个名为 button-counter 的新全局组件
6. app.component('button-counter', {
7. data() {
8. return {
9. count: 0
10. }
11. },
12. template: `
14. You clicked me {{ count }} times.
15. `
16. })

INFO

在这里演示的是一个简单的示例，但是在典型的 Vue 应用程序中，我们使用单个文件组件而不是字符串模板。你可以在本节找到有关它们的更多信息。

组件是可复用的组件实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

1. app.mount('#components-demo')

点击此处实现

因为组件是可复用的组件实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

#组件的复用

你可以将组件进行任意次数的复用：

点击此处实现

注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

#组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 component 全局注册的：

1. const app = Vue.createApp({})
4. app.component('my-component-name', {
5. // ... 选项 ...
6. })

全局注册的组件可以在随后创建的 app 实例模板中使用，也包括根实例组件树中的所有子组件的模板中。

到目前为止，关于组件注册你需要了解的就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把组件注册读完。

#通过 Prop 向子组件传递数据

早些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

1. const app = Vue.createApp({})
4. app.component('blog-post', {
5. props: ['title'],
6. template: `

   {{ title }}

   `
7. })
10. app.mount('#blog-post-demo')

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

一个 prop 被注册之后，你就可以像这样把数据作为一个自定义 attribute 传递进来：

点击此处实现

然而在一个典型的应用中，你可能在 data 里有一个博文的数组：

1. const App = {
2. data() {
3. return {
4. posts: [
5. { id: 1, title: 'My journey with Vue' },
6. { id: 2, title: 'Blogging with Vue' },
7. { id: 3, title: 'Why Vue is so fun' }
8. ]
9. }
10. }
11. }
14. const app = Vue.createApp({})
17. app.component('blog-post', {
18. props: ['title'],
19. template: `

    {{ title }}

    `
20. })
23. app.mount('#blog-posts-demo')

并想要为每篇博文渲染一个组件：

3. v-for="post in posts"
4. :key="post.id"
5. :title="post.title"
6. >

如上所示，你会发现我们可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，是非常有用的。

到目前为止，关于 prop 你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把 prop 读完。

#监听子组件事件

在我们开发  组件时，它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号，同时让页面的其它部分保持默认的字号。

在其父组件中，我们可以通过添加一个 postFontSize 数据 property 来支持这个功能：

1. const App = {
2. data() {
3. return {
4. posts: [
5. /* ... */
6. ],
7. postFontSize: 1
8. }
9. }
10. }

它可以在模板中用来控制所有博文的字号：