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
函数。
vue
<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
:
vue
<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
元素):
html
<!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
字段来定义组件的模板。
javascript
// 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
。
javascript
// 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 应用的动作。
html
<!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 都提供了简洁而强大的解决方案。