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

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

你可能感兴趣的:(前端,前端,vue,es,开发工具)