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

Question

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

我只知道 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单击按钮时显示组件

标签： javascriptvue.jsvuejs2vue-component

Answer 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
     },
}