Vue.js 组件

Vue.js 组件是 Vue.js 最重要的特性之一，用于创建可在 HTML 中重复使用的自定义元素。组件是具有名称的可重用 Vue.js 实例。我们可以在根 Vue.js 实例中将组件用作自定义元素。

以下是创建组件的语法。

语法

让我们创建一个组件以更好地理解组件如何与 Vue.js 一起工作。请参阅以下示例

Index.html 文件

Index.js 文件

让我们使用一个简单的 CSS 文件使输出更具吸引力。

Index.css 文件

程序执行后，您将看到以下输出

输出

This is a component example
This is a component example

示例说明

在上面的示例中，我们在 Index.html 文件中 创建了两个 id 为 component_test1 和 component_test2 的 div。创建组件后，组件的名称将成为自定义元素，我们可以在创建的 Vue 实例元素中使用此自定义元素，即在 id 为 component_test1 和 component_test2 的 div 中。在这里，我们使用测试组件作为组件的名称，并且在 div 中使用相同的名称作为自定义元素。

在 Index .js 文件中，我们创建了两个带有各自 div id 的 Vue.js 实例。

我们创建了一个通用组件，以便与两个视图实例一起使用。

组件的本地注册

我们可以通过在 Index.js 文件中使用以下代码直接将组件作为 vue.js 实例的一部分。此方法称为本地注册。在这里，组件将仅成为已创建的 vue 实例的一部分。

程序执行后，您将看到以下输出

输出

具有更多选项的 Vue.js 组件

我们可以向 Vue.js 组件添加更多选项，例如数据和方法。这与我们向 Vue.js 实例添加数据和方法相同。请参阅以下示例

Index.html 文件

Index.js 文件

在上面的 Index.js 文件中，我们添加了一个数据，其形式是一个返回对象的函数。该对象具有一个 name 属性，该属性已分配了值“Panda”。请参阅示例中使用的以下模板。

在这里，我们在组件中使用数据作为函数，并且我们还以与直接 Vue 实例相同的方式使用其属性。在这里，我们使用了两种方法，changename 和 originalname。在 changename 中，我们正在更改 name 属性，而在 originalname 中，我们将其重置为原始名称。

我们还在 div 上添加了两个事件，mouseover 和 mouseout。在这里，mouseover 事件用于调用 changename 方法，mouseout 事件用于调用 originalname 方法。

现在，执行上述程序以查看输出。执行程序后，您将看到以下输出

输出

您可以看到输出显示了分配的名称“Panda”，我们在 Index.js 文件的数据属性中设置了该名称。我们还在 div 上分配了鼠标悬停和鼠标移出事件。因此，在鼠标悬停时，您将看到组件的名称更改为 Alex，而当鼠标移出时，它将保持与 Panda 相同。

Vue.js 动态组件

动态组件是指在构建时未定义其在应用程序中的位置的组件。我们没有在任何 Vue.js 模板中定义它。相反，动态组件在运行时实例化并放置在应用程序中。在 Vue.js 中，使用关键字 <component></component> 创建一个动态组件，并使用属性绑定它。让我们举一个例子来清楚地理解它。

Index.html 文件

Index.js 文件

让我们使用一个简单的 CSS 文件使输出更具吸引力。

Index.css 文件

程序执行后，您将看到以下输出

输出

这是一个动态组件示例

示例说明

在上面的示例中，您可以看到动态组件是使用以下语法创建的。

在这里，它具有 v-bind:is = "view"， 并且为其分配了一个值 view。 View 在 Vue 实例中定义如下。

执行后，您可以看到模板在浏览器中显示“这是一个动态组件示例”。