vue 丢参数给元件，开启 dialog，没反应？element-ui

Question

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才正常，普通字串不行
。。这是怎么回事？

Answer 1

1. 首先你的理解Vue的数据是单向数据流，所以你这个去变更dialog的Visible是不合理的
2. 至于为什么你传对象可以但是传字符串不可以，因为一个是原始数据类型一个是引用数据类型，当你每次点击操作给data复值对象，都是一个新的内存地址，当然子组件中会监听到data的改变