子组件操作/更新时 父组件 created/mounted 会再次被执行

[cnhuye]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.6.3

Environment

macOS Mojave, vue 2.6.11

Reproduction link

https://ozq0f.csb.app/

Steps to reproduce

示例如 reproduction link. 查看 console 中 "component created!!!" / "Hello Vue mounted" 两句，分别在 components/conponent.vue 的 created/mounted 中输出。
点击 'click' 时 created/mounted 被执行一次， 鼠标指向按钮时，又被执行第2次。

error stack 中看到是 ant-design-vue/es/_util/ContainerRender.js#62行，调用了主组件。

...
this._component = new this.$root.constructor({
...

What is expected?

自定义的组件应该不会被调用两次

What is actually happening?

created/mounted 被执行了第2次

[tangjinzhou]

你应该使用属性去控制弹窗，而不是用 方法 的形式

<div>
    <a @click="showDialog">click</a>
    <componentA :visible="visible" />
  </div>

[cnhuye]

谢谢回复～

但我的目的是做一个类似 $message 这样的方法型组件，调用方法后弹出一些内容。
这种方式是VUE正常的操作方式，没有“应该”与“不应该”之分吧？

就好像调用 $message.success 时，不会写一个这样的标签来显示的：

<a-message-success :visible="visible">Message Content</a-message-success>

所以继续求解决方式～

你应该使用属性去控制弹窗，而不是用 方法 的形式

<div>
    <a @click="showDialog">click</a>
    <componentA :visible="visible" />
  </div>

[minikinl]

是 antd 的 bug，不过你通过 Vue 实例化的组件应该不会遇到这个问题：

/**
 * 正常，此时 $root.constructor === Vue
 * /
const app = new Vue({ mixins: [ComponentA] });

/**
 * 异常，此时 $root.constructor !== Vue，因此会出现重复调用的情况
 * /
const Ctor = Vue.extend(ComponentA);
const app = new Ctor();
// 此时需要重设 constructor
app.constructor = Vue;

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.