求助vue3中父子组件, 子组件v-model设置成props eslint报错问题

Question

父组件：

<Knowledge
    v-model:knowledgeVisible="knowledgeVisible"
    @close="close"
  ></Knowledge>

子组件：

<el-dialog
    v-model="knowledgeVisible" // 这里报错了, 说我修改了props的值, 实际上没有, 只是emit
    title="知识库配置"
    width="40%"
    :before-close="handleClose"

// 这里引用的外部文件的interface
defineProps({
  knowledgeVisible: {
    type: Boolean as PropType<KnowledgeConfig["dialogVisible"]>,
  },
});

如果使用计算属性解决了, 但总觉得不太对, 代码：

错误：return的props.knowledgeVisible是只读的
const dialogShow = computed(()=>
{
  return props.knowledgeVisible
});

正确： 不懂为什么set return就可以？
const dialogShow = computed({
  get: () => props.knowledgeVisible,
  set: (val) => {
    return val;
  },
});

// 真正改值是用emit方法改的
const closeEmit = defineEmits<{
  (e: "close", b: boolean, s: string): void;
}>();
const close = () => {
  closeEmit("close", false, "knowledgeVisible");
};

这是为什么呢？实在不懂。
其实就是传了个参数, 控制dialog的开关。
真正改值是emit, 父组件的方法, 而子组件只是获取值。

我试了很多方法, 最后只有computed + set + return val不报错, 这样写对吗？总觉得怪怪的。。

Answer 1

v-model 就是双向的。所以问题出现在了你不应该 v-model="knowledgeVisible"