使用jsx动态创建的组件失去双向绑定效果

[hand19442]

代码如下： onItemClick() { this.$popup({ title: "明细信息详情", showHeader: true, showClose: false, position: "right", headerAlign: "start", showBack: true, content: <SrmForm style="padding: 0 15px;" customizeType="detail" formRefresh={this.formRefresh} columns={this.getColumns()} dataSet={this.dataSet}/>, }); }, 环境： "@babel/plugin-proposal-class-properties": "^7.13.0", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-jsx": "^7.12.13", "@babel/plugin-transform-classes": "^7.13.0", "@babel/plugin-transform-runtime": "^7.13.15", "@babel/preset-env": "^7.13.15", "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", 在点击事件方法里面动态创建了一个弹窗，content参数是弹窗的默认插槽，SrmForm组件接收formRefresh参数（布尔值）并实例化后，外层改变this.formRefresh的值SrmForm组件无法感知，但是修改this.dataSet（对象）是可以的。有什么好的解决办法吗？

[haha4445]

不清楚你用的UI库，但是今天使用ant-design-vue遇到这个问题，解决方法是调用modal或者你这个popup本身的update方法，这个视图问题不是这个jsx解析导致的。例如以下为antdv库示例代码

<template>
  <a-button @click="countDown">
    Open modal to close in 5s
  </a-button>
</template>
<script>
export default {
  methods: {
    countDown() {
      let secondsToGo = 5;
      const modal = this.$success({
        title: 'This is a notification message',
        content: `This modal will be destroyed after ${secondsToGo} second.`,
      });
      const interval = setInterval(() => {
        secondsToGo -= 1;
        modal.update({
          content: `This modal will be destroyed after ${secondsToGo} second.`,
        });
      }, 1000);
      setTimeout(() => {
        clearInterval(interval);
        modal.destroy();
      }, secondsToGo * 1000);
    },
  },
};
</script>