标签: vue-composition-api

在我的代码中，我已经（或希望）在某些时候使用复杂的 prop 类型。下面是我想到的示例：

enum Country {
  [...]
}

interface IPerson {
  firstname: string;
  lastname: string;

}

interface IAddress {
  street: string;
  houseNo: string;
  city: string;
  postalCode: string;
  country: number;
}

interface ITestComponentProps {
  person: IPerson;
  addresses: Array<IAddress>;
}

那么我想用这一切来实现的TestComponent.vue是：

[...]
const props = defineProps<ITestComponentProps>();
[...]

我现在期望的是某种错误消息或任何告诉我在尝试如下操作时没有提供正确结构的道具的信息：

[...]
<TestComponent :props="'foo'" />
[...]

Vue 的文档中有如下说明：

目前不支持复杂类型和从其他文件导入类型。将来有可能支持类型导入。

有谁知道是否有解决方法来获得所需的行为或何时支持复杂类型？

我只见过每个组件有一个 onMounted() 的示例。
我想对每个功能使用 onMounted() 。
有什么问题吗？

我的组件.vue

<script setup>
import { onMounted } from 'vue';

// Feature A
onMounted(() => {
  // Do something.
});

// Feature B
onMounted(() => {
  // Do something.
});
</script>

const props = defineProps({
items: {
    /** @type {{new(): Color[] }} */
    type: Array,
    required: true,
  },
  selectedColor: {
    type: Object,
    required: true,
  },
  composable: {
    type: Function,
    required: true
  }
})

我们不使用打字稿，所以我尝试仅使用 jsdoc 和打字稿接口文件添加类型。

项目正确键入为颜色数组。如何将 selectedColor 的类型指定为 Color？另外，我如何指定可组合项的类型？

这些都不起作用

const props = defineProps({
  selected: {
    /** @type {Color} */
    type: Object,
    required: true,
  },
  composable: {
    /** @type {function(): number} */
    type: Function,
    required: true
  }
})

const props = defineProps({
  selected: {
    /** @type {{ new(): Color}} */ …

如何在 vue 组合 api 中使用activated和deactivated保持活动事件？

我在文档中找不到任何参考资料

我正在使用 Composition API 在 VueJS 3 中创建一个库。我实现了docs 中提到的提供/注入。但是子组件中的属性仍未定义，并且在浏览器控制台中出现以下错误：

我的代码的一个非常简单的实现如下：

在项目中使用

<ThemeProvider>
    <Button color="green">
        ABC
    </Button>
</ThemeProvider>

<script>
    import { ThemeProvider, Button } from 'my-library'

    export default {
        name: 'SomePage',
        setup() {...},
    }
</script>

ThemeProvider.js（父组件）

import { toRefs, reactive, provide, h } from 'vue'

export default {
    name: 'theme-provider',
    props:
        theme: {
            type: Object,
            default: () => ({...}),
        },
    },
    setup(props, { slots }) {
        const { theme } = toRefs(props)

        provide('theme', reactive(theme.value))

        return () =>
            h(
                'div',
                {...}, …

考虑这个说明性示例：

const App = {
 setup() {
  const name = Vue.ref("");
  let firstTime = true;
  const message = Vue.computed(() => {
    if (firstTime) {
      firstTime = false;
      return "Welcome stranger";
    }
    return `Hello ${name.value}`;
  });
  
  return {
    name,
    message
  }
 }
};

Vue.createApp(App).mount("#root");

<script src="https://unpkg.com/vue@next"></script>
<div id="root">
  name: <input v-model="name"/> <br/>
  message: {{ message }}
</div>

如您所见，message存储一个计算值，该值应该跟踪更新，name但它不是。
为什么会这样以及如何解决？

在export default {}方法中，有一个name属性来定义组件名称，这在开发工具中很有用，但是新<script setup>标签中的方程式是什么？