一、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 可以监听 props 属性变化，从而编写逻辑处理

1. 在父组件中

<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>

2. 在子组件中

<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>