vue3编写组件时，有个参数是双向绑定的，但是外面没有传入，组件使用update:无法修改这个值？

Question

组件代码：

interface Props {
  loading: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
});

const emit = defineEmits(['update:loading']);

调用时不传入这个 loading，组件内部无法使用 emit('update:loading', true) 修改这个值，一直是 false ，请问有什么方法解决吗？还是我哪里写的有问题？

Answer 1

你这个双向绑定实际上是在子组件触发父组件传进来的loading更新去改变值的，你父组件都没有定义这个变量，你调用update当然无效了啊，你要想既是双向绑定，又能够子组件自用，建议这样写：

const childLoading = computed({
  get：() => props.loading,
  set: (val) => emits('update:loading', val)
})

子组件使用childLoading