vue 点击后 挂载 子组件

在Vue中，可以通过点击事件来挂载子组件。首先，需要在父组件中引入子组件，并在父组件的`components`选项中注册子组件。

然后，在父组件中使用`v-on`指令绑定一个点击事件，在点击事件的处理函数中，使用`v-if`或`v-show`指令来控制子组件的显示和隐藏。当点击事件触发时，子组件会被挂载到父组件中，从而实现点击后挂载子组件的效果。

下面是一个示例代码：

<template>
  <div>
    <button @click="showChild">点击按钮挂载子组件</button>
    <div v-if="isChildVisible">
      <ChildComponent/>
    </div>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      isChildVisible: false
    };
  },
  methods: {
    showChild() {
      this.isChildVisible = true;
    }
  }
};
</script>

在上面的代码中，首先在父组件中引入了`ChildComponent`，并在`components`选项中注册了子组件。然后，在父组件的`data`选项中定义了一个`isChildVisible`变量，用于控制子组件的显示和隐藏。在父组件的`methods`选项中定义了一个`showChild`方法，当点击按钮时，该方法会被执行，从而将`isChildVisible`设为`true`，子组件就会被挂载到父组件中。

这样，当点击按钮时，子组件就会被成功挂载到父组件中，实现了点击后挂载子组件的效果。