Vue 3 通过两种方式将反应对象传递给组件

Question

我在使用组合 API 的 vue 3 中以两种方式绑定反应式组件时遇到问题。

设置：

父调用代码为：

 <template>
  <h1>{{ message.test }}</h1>
  <Message v-model="message" />
</template>

<script>
import Message from '@/components/Message.vue';
import { reactive } from 'vue';

export default {
  name: 'Home',
  components: { Message },

  setup() {
    const message = reactive({ test: '123' });

    return {
      message
    };
  }
};
</script>

子组件代码为：

 <template>
  <label>
    <input v-model="message" type="text" />
  </label>
</template>

<script>
import { computed } from 'vue';

export default {
  props: {
    messageObj: {
      type: Object,
      default: () => {},
    },
  },

  emits: ['update:messageObj'],

  setup(props, { emit }) {
    const message = computed({
      get: () => props.messageObj.test,
      set: (value) => emit('update:messageObj', value),
    });

    return {
      message,
    };
  },
};
</script>

问题：

加载组件时，对象的默认值显示在输入字段中。这是应该的，但是，当我更新输入框中的值时，父视图中的 H1 不会更新为新的输入框值。

我已经通过 stackoverflow 板和谷歌进行了搜索，但没有发现任何关于需要做什么才能使对象具有反应性的提示。

我通读了 反应性文档，但仍未找到解决我问题的方法。

为了进行测试，我已将消息更改为 ref 并使用此单个 ref 值，数据仍然是反应性的，并且一切都按预期工作。

关于反应对象不更新可能是什么问题的任何指示？

原文由 Peter Pallen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这里

<div id="app">
    <h1>{{ message.test }}</h1>
    <child v-model="message"></child>
</div>

 const { createApp, reactive, computed } = Vue;

// -------------------------------------------------------------- child
const child = {
    template: `<input v-model="message.test" type="text" />`,

    props: {
        modelValue: {
            type: Object,
            default: () => ({}),
        },
    },

    emits: ['update:modelValue'],

    setup(props, { emit }) {
        const message = computed({
            get: () => props.modelValue,
            set: (val) => emit('update:modelValue', val),
        });

        return { message };
    }
};

// ------------------------------------------------------------- parent
createApp({
    components: { child },

    setup() {
        const message = reactive({ test: 'Karamazov' });

        return { message };
    }
}).mount('#app');

原文由 Matt Deacalion 发布，翻译遵循 CC BY-SA 4.0 许可协议