阅读提示：本文共计约4372个文字，预计阅读时间需要大约12分钟，由作者wps会员直播间编辑整理创作于2023年11月06日17时32分09秒。
在 Vue 3 中，可以通过使用 <script setup> 语法和 defineProps 函数来为页面设置 name。以下是一个简单的示例，展示了如何在 Vue 3 组件中设置 name 属性：
import { createApp } from 'vue';
import App from './App.vue';
<script setup lang="ts">
// 引入 defineProps 函数
import { defineProps } from 'vue';
// 定义 props 对象
const props = defineProps({
name: String
});
// 通过 props 对象获取 name 属性的值
console.log(props.name);
</script>
- 在 index.html 文件中，将 App 组件注册到 Vue 实例上并挂载到根元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Vue 3 App</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@next/dist/vue.global.prod.js"></script>
<script src="main.js"></script>
</body>
</html>
现在，当您在组件的 props 中定义了 name 属性后，您可以在组件内部通过 props 对象访问它。例如，在上述代码中，我们使用 console.log(props.name) 输出了 name 属性的值。
本文主题词： vue3设置默认打开页面
