Vue组件介绍

介绍

在开发大型应用程序时，将其分解为更小的组件始终是一个好主意，以使代码更易于阅读、结构化和维护。 大多数 Vue 初学者至少在概念上了解组件是什么，但他们可能不完全了解组件可以做什么和不能做什么。

在本指南中，我们将了解 Vue 中的组件是什么、它是如何工作的、如何通过它们传递数据和事件等等。

什么是 Vue 组件？

平台组件 是 Vue 元素的可重用实例，包括模板、样式和 JavaScript 元素。 每个组件都是“它自己的东西”，类似于每个 HTML 元素“它自己的东西”，Vue 组件和 HTML 元素都允许我们将它们用作网页的构建块。

您可以将 Vue 组件视为嵌入了 JavaScript 的 HTML 元素，您可以自己定义和操作它们。

典型的 Vue 应用程序由许多组件组成，这些组件可以根据需要多次重复使用。

例如，一个普通的网站有一些部分出现在所有页面上——导航栏、页眉、页脚等。 因此，将它们中的每一个都作为一个单独的组件被认为是一种很好的做法。 这样，我们就可以创建结构良好、可读、可重用且易于维护的代码：

如何创建 Vue 组件

有两种创建 Vue 组件的基本方法，具体取决于我们的项目是如何创建的—— 有或没有构建设置. 在第一种情况下，每个组件都存储在一个单独的文件中。 在第二种情况下，一个文件中可以有多个组件。

使用构建设置创建 Vue 组件

大多数项目都是使用 构建设置，这使我们能够创建单文件组件 (证监会) - 专用组件文件 .vue 延期。 这允许我们将 Vue 组件的模板、逻辑和样式封装在一个文件中：

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

在没有构建设置的情况下创建 Vue 组件

如果您出于某种原因无法使用包管理器，例如 npm 在你的机器上安装 Vue，你仍然可以在你的应用程序中使用 Vue。 使用 Vue 构建的替代方案 npm 是通过一个安装Vue CDN（内容交付网络） 直接在您的应用程序中。 让我们快速回顾一下这种创建 Vue 组件的方法。

在不构建的情况下安装 Vue 将使我们能够像使用纯 JavaScript 一样使用特定于 Vue 的功能。 语法有点类似于我们在普通 SFC 中看到的语法：

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

在本指南中，我们将使用 SFC 语法，因为这是创建组件最常用的方法。

如何在 Vue 中注册组件

到目前为止，我们已经了解了如何在 Vue 中创建组件。 下一步将是在另一个组件中使用这些组件 （父子层次结构）.

为此，我们必须首先注册我们要使用的组件。 此注册需要导入然后注册组件。 这样做有两种选择—— 全球化 和 本地注册.

Vue组件-全局注册

全局注册的组件，顾名思义，是全局可用的，这意味着它们可以在我们应用程序的任何组件中使用，而无需我们重新导入它们。 这是通过使用注册组件来完成的 app.component() 方法：

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

在我们有很多组件的情况下，我们可以 链 他们这样：

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

在我们注册了我们的组件之后，我们可以使用以下语法在此应用程序中的任何组件的模板中使用它们：

<ChildComponent/>
<ProfileComponent/>

Vue组件-本地注册

在大多数情况下，我们将使用本地注册，因为它允许我们确定已注册组件的可用性范围。 导入这些组件，然后将它们添加到 components 选项完成这个：

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

命名组件时，使用 骆驼套 明确这是一个 Vue 组件，而不是模板中的原生 HTML 元素。 这也使得在 JavaScript 中导入和注册组件变得更加容易。

如何通过 Vue 组件传递数据

创建组件的好处之一是能够通过模块化来重用代码。

假设我们正在创建一个用户的个人资料组件，需要从个人资料页面接收每个学生的数据； 在这种情况下，我们必须将此数据从配置文件组件（父组件）向下传递到用户配置文件组件（子组件），我们将使用 props。

道具

Props 是我们可以在组件上注册的自定义属性，因此我们可以使用 props 脚本标签中的选项：

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

老虎机

Vue 插槽是保留空间，允许我们将任何类型的内容从一个组件传递到另一个组件。 这提供了比 props 更集中的控制，因为与 props 不同，父组件控制子组件内的内容。 例如，我们可以制作以下按钮：

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

然后我们可以在任何我们想要的地方使用这个组件，并给它我们想要的内容。 没有给它一个内容意味着它将使用我们给它的默认值（点击我）：

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

如何从 Vue 组件发出事件

我们了解到 props 用于将数据从父组件向下发送到子组件。 但是我们可能想知道是否有一种方法可以将某些东西从子组件发送到父组件。 答案是 含，事件也可以从子组件发送到父组件。

假设我们有一个父组件（App.vue) 包含单个子组件 (MyBlogPost.vue). 此外，子组件包含一个用于更改标题的按钮。

假设我们想要在单击按钮时更改页面标题，以便触发函数：

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

子组件将如下所示：

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

结论

在本指南中，我们学习了如何在 Vue 中使用组件，这对于任何使用 Vue 的人来说都是必不可少的。 我们还学习了如何发送和接收数据，以及如何发出事件。

• SEO 支持的内容和 PR 分发。 今天得到放大。
• 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 访问这里。
• Sumber: https://stackabuse.com/introduction-to-vue-components/