Vue3自定义组件（附带实例）

当我们创建了 Vue 应用实例后，使用 mount 方法可以将其绑定到指定的 HTML 元素中。应用实例可以使用 component 方法来定义组件，定义组件后，可以直接在 HTML 文档中进行使用。

例如，创建一个名为 test.component.html 的测试文件，在其中编写如下 JavaScript 示例代码：

<script>
const { createApp, ref } = Vue;

const App = createApp({});

const alertComponent = {
  setup() {
    // 警告框提示
    const msg   = "警告框提示";
    const count = ref(0);

    const click = () => {
      alert(msg + count.value++);   // 弹出提示框
    };

    return { msg, count, click };
  },
  template: '<div><button @click="click">按钮</button></div>'
};

// 注册全局组件
App.component("my-alert", alertComponent);
App.mount("#Application");
</script>

如以上代码所示，在 Vue 应用中定义组件时使用了 component 方法，这个方法的第 1 个参数用来设置组件名，第 2 个参数用来设置组件的配置对象，组件的配置对象与应用的配置对象用法基本一致。在上述代码中，setup 函数配置了组件所必需的数据和方法。

需要注意，定义组件时最重要的是 template 配置项，这个选项用于设置组件的 HTML 模板，以上代码中我们创建了一个简单的按钮，当用户单击此按钮时会弹出警告框。

之后，当需要使用自定义的组件时，只需要使用组件名标签即可，例如：

<div id="Application">
    <my-alert></my-alert>
    <my-alert></my-alert>
</div>

运行代码，尝试单击页面上的按钮，可以看到程序已经能够按照预期正常运行了，如下图所示。

图 1 使用组件

需要注意，上面代码中的 my-alert 组件是定义在 Application 应用实例中的，在组织 HTML 框架结构时，my-alert 组件只能在 Application 挂载的标签内使用，在外部使用是无法正常工作的。

例如，下面的写法将无法正常渲染出组件：

<div id="Application">
</div>
<my-alert></my-alert>

使用 Vue 中的组件可以使得HTML代码的复用性大大增强。同样，在日常开发中，我们也可以将一些通用的页面元素封装成可定制化的组件，在开发新的网站应用时，可以使用日常积累的组件进行快速搭建。你或许已经发现了，组件在定义时的配置选项与 Vue 应用实例在创建时的配置选项是一致的，都可以定义存储属性、计算属性、方法、属性侦听器等。我们在创建应用时实际上就创建了一个根组件。

当组件在进行复用时，每个标签实际上都是一个独立的组件实例，其内部的数据是独立维护的，例如上面示例代码中的 my-alert 组件内部维护了一个名为 count 的属性，单击按钮后会计数，不同的按钮将会分别进行计数。

Vue3自定义组件（附带实例）

相关文章