VueJS实现父组件Next显子组件、子组件Prev返回父组件

嘿，这个问题我之前也碰到过，核心是子组件没法直接修改父组件的状态，得通过Vue的父子组件通信机制来实现反向通知。咱们一步步来解决：

1. 明确核心逻辑 #

父组件需要一个状态变量来控制子组件的显示/隐藏，比如showChild。点击父组件的Next按钮时把showChild设为true，显示子组件；子组件点击Prev按钮时，通知父组件把showChild改回false，就能切回去了。

2. 父组件修改方案 #

首先在父组件里完善状态和事件监听：

<template>
  <v-form>
    <v-flex>
      <!-- 父组件内容区域 -->
      <div v-if="!showChild">
        <!-- 你的radio输入等原有内容 -->
        <v-btn @click="showChild = true">Next</v-btn>
      </div>
      
      <!-- 子组件：监听子组件触发的返回事件 -->
      <ChildComponent 
        v-if="showChild" 
        @go-back="showChild = false"
      />
    </v-flex>
  </v-form>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      showChild: false,
      response: { /* 你的response原有数据 */ }
    }
  }
}
</script>

3. 子组件修改方案 #

子组件里的Prev按钮点击时，通过$emit触发一个自定义事件（比如go-back），通知父组件切换状态：

<template>
  <div>
    <!-- 子组件的内容 -->
    <v-btn @click="handleGoBack">Prev</v-btn>
  </div>
</template>

<script>
export default {
  methods: {
    handleGoBack() {
      // 触发自定义事件，给父组件传递返回信号
      this.$emit('go-back')
    }
  }
}
</script>

4. Vue 3组合式API的适配写法 #

要是你用的是Vue 3的<script setup>，写法稍微调整下：

父组件：

<template>
  <!-- 结构和上面一致 -->
  <ChildComponent v-if="showChild" @go-back="showChild = false" />
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const showChild = ref(false)
</script>

子组件：

<template>
  <v-btn @click="handleGoBack">Prev</v-btn>
</template>

<script setup>
// 定义要触发的事件
const emit = defineEmits(['go-back'])

const handleGoBack = () => {
  emit('go-back')
}
</script>

为什么之前不行？ #

Vue遵循单向数据流原则，子组件不能直接修改父组件的状态，必须通过触发事件的方式让父组件自己修改状态。你之前的代码应该是没给子组件添加事件通知的逻辑，所以父组件收不到返回的信号～

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