子组件如何获取更新后的props值

在Vue中,当父组件的属性值在点击事件后改变,如何将新值传递给子组件并更新显示。问题在于父组件的属性变化不会自动同步到子组件。解决方法是通过watch监听或在子组件中直接使用props的值。示例展示了在表格点击事件中更新dialog的详情信息,并传递给子对话框组件进行显示。
摘要由CSDN通过智能技术生成

父子通信初始值为空,通过事件改变后怎么传给子组件

场景:
子表单的值由父组件传递过来,prop接受后为空,因为父组件中该值默认为空,需要经过点击事件获取值之后再传给子组件更新显示。
比如:当点击列表某行,弹出具有该行详情信息的对话框/列表(dialog)。而父组件初始传递的值默认为空,需要当点击后再重新赋值传递。

原因:从 props 的值传递给子组件,只有一次操作,就是在 mounted 中,往后即使 props的值发生了变化,子组件也接收不到。除非使用watch监听。注意:将传递过来的值再赋值给data中,在子组件中使用data的值。

示例:(在element-ui组件库的使用情况下)
父组件 (table属性不全,与本主题不相干的属性都删掉了)

<!-- 通过点击更改对话框父组件的属性值,动态显示对话框 。 这里对话框的显示与隐藏不再赘述,详见另一篇。-->
<el-table
    @cell-click='openTable'
>
</el-table>
<!-- 对话框父组件,此时传递给子组件的rowDetails为空(data中定义为空),可以通过子组件的created进行查看 -->
<Dialog :dialogFormVisible.sync='dialogFormVisible' :rowDetails='rowDetails'></Dialog>
data(){
    // 
    return{
         rowDetails: ''
    }
},
// 此时通过点击事件,更改了rowDetails的值。(该点击事件获取了所点击行的信息)
openTable(row) {
    this.dialogFormVisible = !this.dialogFormVisible;
    this.rowDetails = row.natural
}

子组件

<el-form>
    <el-form-item label="spec">
        <el-input v-model="newObj.spec"></el-input>
    </el-form-item>
</el-form>
data() {
    return {
        newObj:{}
    }
},
props: ['rowDetails'],
watch:{
    rowDetails(){
        this.newObj=this.rowDetails;
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值