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

显示此代码te组件时没有单击按钮，我想在单击按钮时显示组件selectpersons

Answer 1

您希望组件 selectpersons 不可见，直到有人单击按钮？然后执行以下操作：

String

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

Answer 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

的更多信息

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

2 个答案: