VUE组件封装、切换和父子组件变量函数的调用

关注

原创最新推荐文章于 2026-08-17 16:04:26 发布 7.1k 阅读 AI 写同款· GEO 优化 ›

Vue实现TabBar底部导航栏灵活组件保姆级超详细 Vue实现TabBar底部导航栏组件 TabBar效果预览： TabBar实现思路一、如果在下方有一个单独的TabBar组件，如何封装自定义tabbar组件，在APP中使用。让TabBar处于底部，并且设置相关的样式。二、TabBar中现实的内容由外界决定。定义插槽。 flex布局评分TabBar。三、自定义TabBarItem，可以传入图片和文字自定义tabbarItem，并且定义两个插槽:图片，文字。给两个插槽外层包装div，用于设置样式。填充插槽，实现底部Tab 阅读详情

1、组件封装文档

https://blog.youkuaiyun.com/ff186345/article/details/103681794
2、如何在标签中切换组件
https://www.cnblogs.com/angle-xiu/p/11748665.html

测试代码

<style >

</style>
<template>
    <Layout>
      <Modal
        v-model="sceneAddModal"
        title="新增"
        @on-ok="ok"
        @on-cancel="cancel">
        <component :is="addComponent"></component>
      </Modal>
    </Layout>
</template>
<script>
import EidForm from '@/components/scene/EidForm';
import SceneForm from '@/components/scene/SceneForm';
import AddSceneCell from '@/components/scene/AddSceneCell';
import AddEidCell from '@/components/scene/AddEidCell';
export default {
  components: {
    EidForm: EidForm,
    SceneForm:SceneForm,
    AddSceneCell:AddSceneCell,
    AddEidCell:AddEidCell
  },
  data () {
  	return {
           addComponent:''}
  },
  method:{
   	addNewElement(){
        this.addComponent = AddSceneCell;
        this.sceneAddModal = true;
    },
    eidNewElement(){
        this.addComponent = AddEidCell;
        this.sceneAddModal = true;
    }
  }
</script>

3、组件间的函数调用
（1）vue中关于$emit的用法可以子组件调函数调用父组件函数https://www.cnblogs.com/chenhuichao/p/8709651.html
（2）vue子组件如何修改父组件中的变量 https://www.cnblogs.com/mxnl/p/13492961.html