父页面:
<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>