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

最新推荐文章于 2024-05-11 07:24:55 发布

程序猿-日记本

最新推荐文章于 2024-05-11 07:24:55 发布

阅读量7k

点赞数 1

分类专栏：前端文章标签：前端 vue es 开发工具

本文链接：https://blog.csdn.net/communicationjava/article/details/121146585

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、组件封装文档

https://blog.csdn.net/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