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

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

阅读 2.6k
1 个回答
  1. 首先你的理解Vue的数据是单向数据流,所以你这个去变更dialogVisible是不合理的
  2. 至于为什么你传对象可以但是传字符串不可以,因为一个是原始数据类型一个是引用数据类型,当你每次点击操作给data复值对象,都是一个新的内存地址,当然子组件中会监听到data的改变
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题