构建 Vue3.x 组件及其在 Vue 和 HTML 中的应用

Vue3.x 作为一个渐进式 JavaScript 框架,为开发者提供了强大的工具和灵活的方法来构建用户界面。本文将详细介绍如何通过两种完全不同的方式构建一个 Vue3.x 组件,以及如何在其他 Vue3.x 组件和 HTML 文件中使用这个构建出来的组件。

SFC(单文件组件)模式

构建 Vue3.x 组件

构建一个 Vue3.x 组件主要涉及创建一个单文件组件(Single File Component,SFC),这里我们通过 JavaScript 来实现。

步骤 1:定义组件

首先,创建一个名为 MyComponent.vue 的文件作为 Vue 组件。Vue3.x 推荐使用 Composition API 来定义组件,因此下文将利用 setup 函数。

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'MyComponent',
  setup() {
    const message = ref('Hello Vue3!');

    return { message };
  }
}
</script>

上述代码中定义了一个简单的组件,它利用了 Vue3.x 的响应式系统(ref)来管理数据状态,并在模板中显示这个状态。

步骤 2:在 Vue3.x 项目中使用组件

假设要在另一个组件中使用 MyComponent 组件,需要先在父组件中导入它。

导入并注册组件

在父组件中(比如 App.vue),导入并局部注册 MyComponent

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue';

export default {
  name: 'App',
  components: {
    MyComponent
  }
}
</script>

通过这种方式就可以在 App.vue 的模板中任何位置使用 <MyComponent /> 了。

步骤 3:在 HTML 文件中直接使用 Vue3.x 组件

要在纯 HTML 文件中使用 Vue3.x 组件,则需要通过 Vue 的全局 API createApp 来挂载一个 Vue 应用实例,并注册组件。

创建一个 HTML 文件

在你的 HTML 文件中,你需要引入 Vue3.x 的脚本,并定义一个挂载点(比如一个 div 元素):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue3 Component in HTML</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app"></div>

  <script type="module">
    import { createApp } from 'vue';
    import MyComponent from './path/to/MyComponent.vue';

    const app = createApp({
      components: {
        MyComponent
      },
      template: `<MyComponent />`
    });

    app.mount('#app');
  </script>
</body>
</html>

通过在 <script> 标签中设置 type="module",使得可以使用 ES 模块导入语法。然后,我们从 Vue 导入 createApp 函数,并从组件文件导入 MyComponent 组件。通过调用 createApp 并传递一个包含 MyComponent 组件的对象,我们创建了一个 Vue 应用实例。最后,通过调用 mount 方法并指定一个选择器,我们将 Vue 应用挂载到 DOM 中。

非SFC(纯js)模式

步骤 1:构建 Vue3.x 组件(MyComponent.js)

首先,创建一个 Vue3.x 组件 MyComponent.js,并使用 template 字段来定义组件的模板。

// MyComponent.js
import { defineComponent, ref } from 'vue';

const MyComponent = defineComponent({
  name: 'MyComponent',
  setup() {
    const message = ref('Hello, Vue3 with template!');
    return { message };
  },
  template: `<div>{{ message }}</div>`
});

export default MyComponent;

这个组件通过 setup 函数返回一个响应式数据 message,并在 template 字段中使用这个数据。

步骤 2:在主组件(App.js)中使用 MyComponent.js

接下来,创建 App.js 文件,在这个文件中,定义一个主组件 App,并在其中使用 MyComponent

// App.js
import { defineComponent } from 'vue';
import MyComponent from './MyComponent.js';

const App = defineComponent({
  name: 'App',
  components: {
    MyComponent
  },
  template: `
    <div id="app">
      <h1>This is the App component</h1>
      <MyComponent />
    </div>`
});

export default App;

这里在 App 组件的 template 字段中直接使用了 MyComponent 组件。

步骤 3:在 HTML 文件中使用 Vue 应用

index.html 文件中,首先引入 Vue 库,并使用 <script> 标签直接引入 App.js,在这个脚本中将执行创建和挂载 Vue 应用的动作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 3 App</title>
    <script type="module" src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
    <script type="module">
      import { createApp } from 'vue';
      import App from './App.js';

      createApp(App).mount('#app');
    </script>
</body>
</html>

在这个 index.html 文件中,首先为 Vue 应用提供了一个挂载点 <div id="app"></div>。然后,通过 <script type="module"> 引入 Vue 库和定义的 App.js。最后,使用 createApp(App).mount('#app'); 创建 Vue 应用并挂载到页面上的指定元素。

采用这种方式,不仅充分利用了 Vue 3.x 中 template 字段的便利,而且还保持了应用的模块化。这样的实践允许开发者以更接近 Vue 推荐的方式来定义和使用组件,同时也使得组件的引用和挂载过程更加直观和简洁。通过在 index.html 中完成应用的挂载,更清楚地控制了应用的入口点,为可能的进一步扩展留出了空间。

总结

通过以上步骤,展示了如何通过两种把不同的方式构建一个 Vue3.x 组件,以及如何在其他 Vue3.x 组件和普通 HTML 文件中使用它。这种灵活性是 Vue 的一大优势,使得它可以适应各种不同的开发需求和环境。无论是在单页面应用中,还是在传统的多页面应用中嵌入 Vue 组件,Vue3.x 都提供了简洁而强大的解决方案。

原文链接:https://juejin.cn/post/7341267497427337216 作者:慕仲卿

(0)
上一篇 2024年3月2日 上午10:05
下一篇 2024年3月2日 上午10:15

相关推荐

发表评论

登录后才能评论