按钮实现在vue组件里展示另一个组件

可以使用Vue的条件渲染指令v-if或者v-show来实现。具体方法如下：

1.在需要显示另一个组件的按钮上添加一个点击事件。

2.在点击事件中修改数据或者变量（比如使用v-if或者v-show指令控制显示状态）。

3.在Vue组件的template中定义需要展现的另一个组件，并根据数据或者变量来进行渲染。

例如，如果有一个按钮和需要展示的另一个组件，可以在Vue组件内这样实现：

<template>
<div>
<button @click="showComponent = !showComponent">按钮</button>
<div v-show="showComponent">
<AnotherComponent />
</div>
</div>
</template>

<script>
import AnotherComponent from './AnotherComponent.vue'
export default {
data () {
return {
showComponent: false
}
},
components: {
AnotherComponent
}
}
</script>

这样，点击按钮显示或隐藏另一个组件，而且不需要进行页面跳转或者刷新。

相关问题

举个vue点击按钮实现异步加载组件的例子

可以使用 Vue 的异步组件来实现。例如：

<template>
<div>
<button @click="loadComponent">加载组件</button>
<component :is="currentComponent"></component>
</div>
</template>

<script>
export default {
data() {
return {
currentComponent: null
}
},
methods: {
loadComponent() {
import('./MyComponent.vue').then(component => {
this.currentComponent = component.default
})
}
}
}
</script>

在这个例子中，我们使用了 import() 函数来异步加载 MyComponent.vue 组件。当用户点击按钮时，loadComponent 方法会被调用，然后使用 import() 函数来加载组件。一旦组件加载完成，我们就可以将其设置为 currentComponent，然后 Vue 会自动渲染它。

我要在vue组件里调用这个commit方法

如果你需要在 Vue 组件中调用 Vuex 中的 commit 方法，可以通过以下几个步骤来实现：

1. 在组件中引入 Vuex 的 store 对象：

import store from '@/store'

2. 在组件的 methods 中，使用 `$store.commit` 方法来调用 mutation：

methods: {
  increment() {
    store.commit('increment')
  }
}

这里的 `increment` 是 mutation 的名称，你需要根据你的具体需求来修改名称。

3. 在模板中使用组件的方法：

<template>
  <div>
    <button @click="increment">increment</button>
  </div>
</template>

这样，在点击按钮时，就会触发 `increment` 方法，进而调用 Vuex 中的 `increment` mutation。