如何在按钮单击 vue.js 上导入其他组件答案

【问题标题】：how to import other component on button click vue.js如何在按钮单击 vue.js 上导入其他组件
【发布时间】：2019-11-17 01:33:49
【问题描述】：

我想在单击按钮时显示其他组件，当然我也想发送参数，我该怎么做？

我只知道 vue 中的基本用法导入，这里是我创建的。

这里是我的模板父级

<template>
    <div class="detail-project">
      <selectpersons></selectpersons>
    </div>
    <button v-on:click="selectPerson(param1, param2)"></button>
</template>

这是我的脚本

import selectpersons from './ActionDetailProject/selectPerson.vue';
    export default {
    components: {
        selectpersons
    },
    methods: {
     selectPerson(param1, param2){
        //not sure what i have to write here...
     },
    }

使用此代码，无需单击按钮即可显示组件，我想在单击按钮时显示组件selectpersons

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

您希望组件 selectpersons 在有人单击按钮之前不可见？然后做这样的事情：

<template>
    <div class="detail-project">
      <selectpersons v-show="visible"></selectpersons>
    </div>
    <button v-on:click="selectPerson(param1, param2)"></button>
</template>

export default {
    data: {
        visible: false,
    },
    components: {
        selectpersons
    },
    methods: {
     selectPerson(param1, param2){
         this.visible = true
     },
}

【讨论】：

【解决方案2】：

您可以根据需要为此组件使用v-show 或v-if。 v-show 添加一个 css 属性 display: none; 并将组件保留在 DOM 中，但它是隐藏的。 v-if 不会呈现，并且在您单击按钮之前您不会在 DOM 中找到它。

<selectpersons v-show="showComponent"></selectpersons>
<selectpersons v-if="showComponent"></selectpersons>

<button v-on:click="selectPerson(param1, param2)"></button>

import selectpersons from './ActionDetailProject/selectPerson.vue';
  export default {
  components: {
    selectpersons
  },
  data: {
    showComponent: false,
  },
  methods: {
   selectPerson(param1, param2){
    this.showComponent = true
   },
 }

了解更多关于条件渲染https://vuejs.org/v2/guide/conditional.html

【讨论】：