index.vue
button
<el-button
size="small"
@click="handleId(scope.row)"
>
开启dialog
</el-button>
methods
handleId(row) {
this.data = row.id
}
template
<Dialog :data="data" />
...下略
dialog component
template
<el-dialog
:visible="dialogVisible">
...下略
script
props: ["data"],
data() {
return {
dialogVisible: false,
};
},
watch: {
data(row) {
if (row) {
this.dialogVisible = true;
}
},
},
如果我是这样写,当点了一次 开启dialog
后,会开启一次 dialog
但是当我关闭 dialog 尝试要再开启一次,怎么点都会没有反应,除非刷新
除非我要改成这样传给子元件
handleId(row) {
this.data = {
id: row.id
}
}
要传一个object才正常,普通字串不行
。。这是怎么回事?
Vue的数据是单向数据流
,所以你这个去变更dialog
的Visible
是不合理的原始数据类型
一个是引用数据类型
,当你每次点击操作给data复值对象,都是一个新的内存地址,当然子组件中会监听到data的改变