props的响应性Vue.js

Question

我刚开始学习Vue，很难理解如何使用组合API定义道具等。

我有一个组件(ACE Editor)，加载如下:

<v-ace-editor
v-model:value="currentRecord.text"
/>

v-ace-editor需要像这样加载模型和值:v-model:value.

import {computed, ref} from 'vue';
import collect from "collect.js"
const props = defineProps({
records: {
type: Object,
},
})
//Get all records.
let getRecords = () => {
return collect(props.records)
}
//Filter the records using "collect.js"
const getUnlabeledRecords = () => {
return getRecords()
.where('skipped', false)
.where('processed', false);
}
//Assign all unlabeled records on the first load.
let allRecords = ref(getUnlabeledRecords());
//In order to check if "text" is empty - and if not, set a default value, load the first record into a temp. variable.
let first = allRecords.value.first();
if(first){
first.text ??= "";
}
//Load the current record into a ref.
let current = ref(first);
//Finally, compute it.
let currentRecord = computed(() => current.value)

从后端背景来看，感觉非常臃肿。

我已经试过了:

let allRecords = ref(getUnlabeledRecords());
let currentRecord = computed(() => allRecords.value.first())

但是这样做导致我不能与currentRecord相互作用-也不能改变allRecords。这意味着，例如，如果currentRecord.text是null从后端，我的副编辑器组件失败，因为它需要一个值。

是否有其他方法来加载这些变量?

Answer 1

在模板中使用ref时，实际上不必调用它的。value。因此，你可以删除计算部分(最后一行)并将模板更改为。

<v-ace-editor
v-model="current.text"
/>

现在，假设您在v-ace-editor中正确地管理了v-model(如果这是您自己的组件)，那么在修改current时应该保持反应性。v-ace-editor.

作为旁注，计算的属性是只读的。你不能指望子组件通过v-model传递来修改它的值。 然而，你应该注意，从父组件更新记录prop将不会更新当前。为此，也许您想在记录上添加一个监视器。

也是个人建议，但如果你只关心currentRecord在你的组件，而不是所有的记录，也许你应该做过滤从父组件和只传递currentRecord作为一个道具。其他个人建议，你可以在脚本中使用const而不是let来声明所有变量。const防止重新赋值，但由于您使用ref，因此您永远不会重新赋值，而是更改其value属性。