Vue中点击按钮调用plantioComp组件的实现方法咨询

你直接在点击方法里返回组件的导入对象是无效的——这只是组件的定义代码，并没有将它挂载到DOM中。下面提供两种适合Vuetify项目的实现方式：

方式一：使用Vuetify弹窗承载组件 #

这是最常用的交互模式，点击按钮弹出包含目标组件的弹窗：

修改后的完整代码：

<template>
  <div class="btn-center">
    <v-btn class="mx-1" fab dark @click="propri" type="submit">
      <v-icon dark> mdi-plus </v-icon>
      <p class="text-btn">Plantio</p>
    </v-btn>

    <!-- 弹窗容器，用来承载plantioComp组件 -->
    <v-dialog v-model="isDialogOpen" max-width="500px">
      <plantioComp />
    </v-dialog>
  </div>
</template>

<script>
import plantioComp from './plantioComp.vue'

export default {
  name: 'btnAdd',
  components: {
    plantioComp // 注册组件，让Vue能识别它
  },
  data() {
    return {
      isDialogOpen: false // 控制弹窗显示/隐藏的响应式变量
    }
  },
  methods: {
    propri() {
      this.isDialogOpen = true // 点击按钮时打开弹窗
    }
  }
}
</script>

方式二：直接在页面中动态渲染组件 #

如果不需要弹窗，而是在当前页面的指定位置显示组件，可以用v-if控制组件的渲染状态：

修改后的完整代码：

<template>
  <div class="btn-center">
    <v-btn class="mx-1" fab dark @click="propri" type="submit">
      <v-icon dark> mdi-plus </v-icon>
      <p class="text-btn">Plantio</p>
    </v-btn>

    <!-- 点击按钮后才渲染组件 -->
    <plantioComp v-if="showPlantio" />
  </div>
</template>

<script>
import plantioComp from './plantioComp.vue'

export default {
  name: 'btnAdd',
  components: {
    plantioComp
  },
  data() {
    return {
      showPlantio: false
    }
  },
  methods: {
    propri() {
      this.showPlantio = true // 切换组件显示状态
    }
  }
}
</script>

关键注意点 #

• 必须先在components选项中注册导入的组件，Vue才能识别并渲染它
• 控制组件显示的核心是通过响应式变量切换渲染状态，而不是直接返回组件对象

内容的提问来源于stack exchange，提问作者Beatriz