标签: vue-script-setup

首先，我知道这可能是一个超级简单的问题，但我已经挣扎了一个半小时，我已经完成了。有史以来第一个 vue 项目，所以我从来没有让 2 个组件相互通信，更不用说何时<script setup>涉及了。

任何帮助我理解为什么会这样工作的相关文档都会很棒。我想了解这是如何工作的，但我的谷歌搜索一无所获。

这个应用程序很简单，它只是在某些卡上切换浅色模式和深色模式。它的内容比下面的内容更多，但为了便于阅读，我已经删除了不相关的（工作）代码。

我的App.vue代码：

<script setup>
import {ref, defineProps} from "vue";
import card from './components/card.vue'

const darkMode = ref(false);

const props = defineProps({
  darkMode: Boolean
})
</script>

<template>
// Bunch of stuff that is irrelevant to the scope of this problem, it works just fine. 
</template>

我的card.vue代码：

<script xmlns="http://www.w3.org/1999/html">
export default {
  data() {
    return {
      
    }
  },
}
</script>

<template>
  <h1 :class="{ 'text-white': darkMode }"> Content! </h1>
</template>

这个项目更加复杂，但我现在要做的就是让他们谈谈。darkMode我只想根据是否true …

我正在使用可组合项在 Vue3 中加载图像。我已经能够将所有道具作为一个对象成功传递，请参阅这个问题，但我无法传递我想要反应的一个属性。我相当确定问题在于未定义的属性

// loadImage.js\nimport { onMounted, ref, watch } from \'vue\'\n\n// by convention, composable function names start with "use"\nexport function useLoadImage(src) {\n  let loading = ref(true)\n  let show = ref(false)\n\n  const delayShowImage = () => {\n    setTimeout(() => {\n      show.value = true\n    }, 100)\n  }\n  const loadImage = (src) => {\n    let img = new Image()\n    img.onload = (e) => {\n      loading.value = false\n      img.onload = undefined\n      img.src = undefined\n      img = undefined\n      delayShowImage()\n    }\n    img.src …

使用 Composition API 将数组定义为 Vue 3 组件的 props 很简单......

<script setup>

defineProps({
  items: {
    type: Array,
    required: true,
  },
});

</script>

现在这个数组应该是一个如下所示的对象数组。这也不是问题。

[
  {
    username: "foo",
    email: "foo@example.com"
  },
  {
    username: "bar",
    email: "bar@example.com"
  }
]

但是有没有办法定义数组中的每个对象都必须包含属性username和email？这样使用该组件的 props 的人就知道这些对象必须是什么样子？

当我们将 prop 传递给组件并使用 DefineProps 从子组件定义该 prop 时，会以某种方式创建属性并可从子组件模板访问该属性。

父组件.vue

<template>
    <child-component v-model="product">
</template>

<script setup>
import childComponent from "./childComponent.vue"
</script>

子组件.vue

<template>
    {{ product }}
</template>

<script setup>
const props = defineProps(['product'])
</script>

在 childComponents 模板中，product无需使用props.product或 toRef 即可访问它。我知道脚本设置会自动注入使用过的道具，但我找不到任何信息（在文档中），defineProps 也做了一些事情。有没有这方面的信息。

我需要 VueJS 组件中的路由参数。例如中的42example.de/page/42。

// router
// ...
    {
      path: '/pages/:id',
      name: 'pages',
      component: () => import('../views/PageView.vue'),

    },  
// ...

// PageView.vue
<script setup>
    import { onMounted } from "vue";
    import { ref } from 'vue';

    onMounted(async () => {
      console.log(  $route.params.id );
   }

这里我得到错误： Uncaught (in promise) ReferenceError: $route is not defined。

但在组件的模板中，{{ $route.params.id }}可以进行访问。但我在剧本中需要它。我究竟做错了什么？

我正在使用 Laravel/Inertia/Vue3，我获取了用户对象，然后我想在其他函数中使用它，但它总是未定义。

<script setup>\n// imports...\n\nconst props = defineProps({\n    // props...\n})\n\nconst user = computed(() => usePage().props.value.user);\n\nconst click = () => {\n  alert(`${user.name} clicked`);\n}\n</script>\n

如果我尝试访问userHTML v\xc3\xada 车把中的对象，它会按预期工作，但我无法在单击功能中使用它。当然，我可以const user在函数内部分配一个值usePage().props...，但这看起来很丑陋，必须有另一种方法。

当然，我对 Vue 还很陌生。

编辑 ＃＃＃＃＃

当我说它看起来很丑时，我指的是这个：

<script setup>\n// imports...\n\nconst props = defineProps({\n    // props...\n})\n\nconst user = computed(() => usePage().props.value.user);\n\nconst click = () => {\n    const user = usePage().props.value.user;\n    alert(`${user.name} clicked`);\n}\n</script>\n

一定有更好更正确的方法

在 vue 文档中，我在“脚本设置”指南中看到“命名空间组件”，它写道：

您可以使用带点的组件标签（如 <Foo.Bar>）来引用嵌套在对象属性下的组件。当您从单个文件导入多个组件时，这非常有用：

<script setup>
import * as Form from './form-components'
</script>

<template>
  <Form.Input>
    <Form.Label>label</Form.Label>
  </Form.Input>
</template>

我想知道在这个例子中表单组件会是什么样子，以及这样的组件的正确用例是什么，它是否与“槽”有关。