VUE3引入html文件并传值
warning:
这篇文章距离上次修改已过450天，其中的内容可能已经有所变动。
在Vue 3中，你可以通过使用<script type="module">标签在HTML文件中引入Vue组件，并传递值。以下是一个简单的例子：
- 创建一个Vue组件（例如
MyComponent.vue）:
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message'],
};
</script>- 创建一个HTML文件，并通过
<script type="module">标签引入Vue组件，并传递值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 3 Component in HTML</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script type="module">
import MyComponent from './MyComponent.vue';
const app = Vue.createApp({});
app.component('my-component', MyComponent);
app.mount('#app');
</script>
</body>
</html>在这个例子中，我们创建了一个Vue 3组件MyComponent.vue，它接受一个名为message的prop。然后在HTML文件中，我们通过<script type="module">标签引入并注册这个组件，并通过HTML标签传递值：
<my-component message="Hello from HTML"></my-component>当你打开这个HTML文件时，它将显示"Hello from HTML"。
评论已关闭