Vue3组件传值（setup语法）

Vue3组件传值（setup语法）

父组件传值：

<template>
    <headerMenu :name="route.query.name" />
    <router-view></router-view>
</template>

组件接收：

<script setup>
// 接收组件传值
const props = defineProps({
    name: {
        type: String,
        require: true
    }
})

使用：

模板内使用

<div>{{name}}</div>

setup内使用

const onClick = (() => {
    console.log(props.name);
})

defineProps文档解释：

• defineProps 和 defineEmits 都是只能在 < script setup > 中使用的编译器宏。他们不需要导入，且会随着 < script setup > 的处理过程一同被编译掉。
• defineProps 接收与 props 选项相同的值，defineEmits 接收与 emits 选项相同的值。
• 传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的作用域。因此，传入的选项不能引用在 setup作用域中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块作用域内。