我有一个属性为"clicked"的App.vue，我正尝试将其传递给子组件。
- 应用程序版本**
<template>
<NavBar :clicked="clicked"/>
<BackDrop :clicked="clicked"/>
<SideDrawer :clicked="clicked" />
<router-view></router-view>
</template>
<script>
import { ref } from "vue";
import NavBar from "./components/Navbar/NavBar.vue";
import BackDrop from "./components/Backdrop/BackDrop.vue";
import SideDrawer from "./components/Sidedrawer/SideDrawer.vue";
export default {
name: "App",
components: { NavBar, BackDrop, SideDrawer },
setup() {
const clicked = ref(false);
return { clicked };
},
};
</script>
export default App;因此，子组件可以有条件地呈现为：
- 侧抽屉视图**
<template v-if="clicked">
<div class="sidedrawer"></div>
</template>
<script setup>
</script>我是否在"App.vue"中正确传递了"点击"参考？
如果我有，你怎么在子组件中访问它们呢？我已经在Google上搜索了一些StackOverflow的帖子，但大多数似乎都使用了，"defineProps（）"，就像下面的代码：
const props = defineProps({
msg: String,
user: Object,
});
// Destructuring props
let { name, lastname } = props.user;
</script>但我不用 typescript 所以这对我不起作用。
什么是"非 typescript "传递 prop 的方式？是否需要使用 typescript 传递 prop ？
编辑：
即使我实现了Typescript并使用了以下代码：
- 侧画值**
<template v-if="clicked">
<div class="sidedrawer">
<h1>{{ props.clicked }}</h1>
</div>
</template>
<script setup>
const props = defineProps({
clicked: boolean,
});
</script>我得到的错误：
'defineProps' is not defined.eslintno-undef'boolean' is not defined.eslintno-undef...
我从这个Github thread收集设置全局变量，所以我这样做了，但它仍然不工作。
- 巴别塔配置js**
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
globals: {
defineProps,
defineEmits,
defineExpose,
withDefaults
}
}
}
3条答案
按热度按时间eeq64g8w1#
在JavaScript中，有两种常见的定义props的方法，一种是使用prop名称数组，如下所示：
或者更优选的是（由于节省了数小时和数天的故障排除）将每个prop和object定义为：
以下是文档的相关部分：https://vuejs.org/guide/components/props.html#prop-validation
lztngnrs2#
不需要，定义 prop 时不需要TypeScript。TypeScript是JavaScript的超集，因此任何TypeScript都是有效的JavaScript。
当使用
<script setup>时，你使用defineProps来定义一个组件可以接受哪些props。你不需要声明或导入它，因为它是一个编译器宏。如果ESlint抱怨，那么它没有被正确配置。将以下内容添加到你的eslint配置文件中。在每个子组件中，您需要接受“clicked”作为属性。
或者（使用运行时类型--这不是@Estus所指出的Typescript）;
在你的App.vue中，你需要如下传递一个值给prop;
如果您不打算使用
<script setup>，那么您可以定义接受哪些 prop ，如下所示;或者（使用运行时类型--这不是@Estus所指出的Typescript）;
hujrc8aj3#
你需要在你的子组件而不是app.vue中定义props代码。另外，不要忘记使用脚本设置，这样你就不必从vue导入defineprops。