Vue.js进阶【7-1】Vue组件component传递父组件的成员函数给子组件子组件emit调用父组件的函数

最新推荐文章于 2025-06-11 10:30:17 发布

原创最新推荐文章于 2025-06-11 10:30:17 发布 · 410 阅读

0 ·

CC 4.0 BY-SA版权

Vue.js进阶教程专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一个使用Vue实现的子组件动态切换示例。通过点击按钮触发事件，父组件控制两个子组件childB和childC之间的显示与隐藏。该示例展示了如何通过v-if和v-else结合@switch-tab事件来实现子组件的切换。

感谢前端大佬给我写的demo

<template >
  <parentA>
    <childB v-if="showList1" @switch-tab="switchTab">
      child B
    </childB>

    <childC v-else>
      child C
    </childC>

  </parent>
</template>

<script>
  
  export default {
    methods: {
      switchTab(val) {
        this.showList1 = val;
      }
    }

  }
</script>


<template class="B">
  
  <button @click="handleDisplay"></button>
</template>
<script>
  export default {
    methods: {
      handleDisplay() {
        this.$emit('switch-tab', false);
      }
    }
  }
</script>