Vue 3：在一个组件中制作其他道具的依赖道具

Question

我想制作一个组件，其 props 将直接相互依赖。

用法1（当variant="first"我必须设置height，width一定不可用）：

<Example variant="first" :height="100" />

用法2（当variant="second"我必须设置width，height一定不可用）：

<Example variant="second" :width="100" />

Example组件的代码：

export default defineComponent({
    props: {
        variant: {
            type: String,
            required: true,
            validator: function(value) {
                // The value must match one of these strings
               return ['first', 'second'].indexOf(value) !== -1
            }
        },
        height: {
            type: Number,
            required: true // <-- Only when variant is "first"
        },
        width: {
            type: Number,
            required: true // <-- Only when variant is "second"
        }
    }
}

来自 React 的示例：

const Example = (
    props:
        { variant: "First"; height: number } |
        { variant: "Second"; width: number }
    ) => {
    /*...code...*/
};

如何在 Vue 3 + TypeScript 中做到这一点？

Answer 1

您可以尝试使用可用于道具的validator 函数。

docs

validator: Function 自定义验证器函数，将 prop 值作为唯一参数。在非生产环境中，如果此函数返回错误值（即验证失败），将引发控制台警告。

或者，您可以通过像mounted 这样的生命周期挂钩或使用watch 添加自定义验证。如果您知道 prop 值没有变化，生命周期方法是OK，如果它们不是静态的，则使用watch，这是一个更可靠的解决方案。