父页面:

<template>
  <div>
    <el-input v-model="msg" placeholder="" size="normal" clearable></el-input>    <!-- 父输入框 -->
    <detail :msg.sync="msg" />    <!-- 用 :msg.sync="" 来绑定 -->
  </div>
</template>
 
<script>
import detail from './components/detailsTable1'
export default {
  name: 'purchaseContract',
  components: {detail},
  data() {
    return {
      msg: '123',
    }
  },
}
</script>
 
子组件 detailsTable1.vue：
<template>
  <div>
    测试字段:
    <el-input v-model="newMsg"></el-input>
  </div>
</template>

<script>
export default {
  props:{
    msg: String,
  },
  data() {
    return {
      newMsg: this.msg
    }
  },
  watch: {  // watch监听值变化，触发彼此更新
    msg: {
      handler(val, oldVal){
        this.newMsg = val   // 触发子组件的newMsg更新
        console.log(val);
      },
      deep:true //true 深度监听
    },
    newMsg: {
      handler(val, oldVal){
        this.$emit('update:msg', val);  // 触发父组件:msg绑定的对象更新
        console.log(val);
      },
      deep:true //true 深度监听
    }
  }
}
</script>