我想在后端获得vue 3的文本区域值，所以我在vue 3组件设置中写了这样的代码：
<script lang="ts">
import {
computed,
defineComponent,
defineEmits,
defineProps
} from "vue";
import type { MessageBase } from "@/model/message/MessageBase";
import { MessageType } from "../../../model/message/MessageType";
import { useStore } from 'vuex'
export default defineComponent({
setup() {
const emit = defineEmits(['update:modelValue']);
const title = process.env.APP_NAME;
const { getters,dispatch } = useStore()
let username = computed(()=>getters['Trans/getUsername'])
chrome.runtime.onMessage.addListener(
async function(request, sender, sendResponse) {
if (request.msg === "something_completed") {
let result = request.data.content
await dispatch(
'Trans/setUsername',
result
)
}
}
);
const props = defineProps({
modelValue: {
type: [String, Number],
default: ''
}
})
computed({
get () {
return props.modelValue
},
set (value) {
return emit('update:modelValue', value)
}
})
const safeTranslate = () => {
let transMe= MessageType[MessageType.TRANSLATE];
let word = props.modelValue;
debugger;
let message : MessageBase = {
type: transMe,
data: {
word: word,
from: "en",
to: "zh"
}
};
chrome.runtime.sendMessage(message,function(response){
});
}
return {
title,
safeTranslate,
username
};
},
watch:{
},
components: {
},
});
</script>
但当我运行这个应用程序时，显示错误：
Uncaught TypeError: Cannot read properties of undefined (reading 'modelValue')
at Proxy.render (popup.js:17752:43)
at renderComponentRoot (popup.js:8083:44)
at ReactiveEffect.componentUpdateFn [as fn] (popup.js:12177:57)
at ReactiveEffect.run (popup.js:6028:29)
at setupRenderEffect (popup.js:12303:9)
at mountComponent (popup.js:12086:9)
at processComponent (popup.js:12044:17)
at patch (popup.js:11645:21)
at mountChildren (popup.js:11832:13)
at mountElement (popup.js:11741:17)
为什么在运行时显示此错误？我该怎么办才能解决这个问题？这是template.html定义：
<div>
<textarea
:value="props.modelValue"
v-on:input="updateValue($event.target.value)"
placeholder="please input the translate words"></textarea>
</div>
模板中不使用props关键字，需要直接访问它们：
<div>
<textarea
:value="modelValue"
v-on:input="updateValue($event.target.value)"
placeholder="please input the translate words"></textarea>
</div>