как импортировать другой компонент по нажатию кнопки 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 при нажатии кнопки

Answer 1

Вы можете использовать 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

Answer 2

Вы хотите, чтобы компонент 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
     },
}