一、computed 解決方案
使用 computed 的 get灾梦、set 屬性峡钓，可以避免異常
<script setup>
import { computed, ref } from 'vue'
const msg = ref('hello world')
// 異常
const errMessage = computed(() => msg.value)
// 正常寫法
const successMessage = computed({
get() {
return msg.value
},
set(v) {
msg.value = v
}
})
</script>
<template>
<div>
<h1>{{ msg }}</h1>
<el-input v-model="msg" />
<el-input v-model="errMessage" />
<el-input v-model="successMessage" />
</div>
</template>
二、props 解決方案
在自組件中通過 computed 可以監(jiān)聽 props 屬性變化若河，從而編寫邏輯處理
- 在父組件中
<script setup>
import { ref } from 'vue'
import DialogForm from '@/components/DialogForm.vue'
const msg = ref('hello world')
</script>
<template>
<div>
<h1>{{ msg }}</h1>
<el-input v-model="msg" />
<dialog-form v-model:msg="msg" />
</div>
</template>
- 在子組件中
<script setup>
import { computed } from 'vue'
const props = defineProps({
msg: {
type: String,
default: ''
}
})
const emit = defineEmits(['update:msg'])
const newMsg = computed({
get() {
return props.msg
},
set(v) {
emit('update:msg', v)
}
})
</script>
<template>
<hr />
<h1>{{ msg }}</h1>
<el-input v-model="newMsg" />
</template>
