父子通信初始值为空,通过事件改变后怎么传给子组件
场景:
子表单的值由父组件传递过来,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;
}
}