iview-父组件中删除子组件的class类名

删除dom节点中的class类名从而重写子组件样式

于父组件中删除子组件的class类名，给子组件添加新的类名从而重写该父组件中的子组件样式。

页面代码

由于公司有很多组，人员时常变动。在我接手这块时，页面已经初步成型。
在页面中使用了其他组的组件，但组件已经写死了样式。于我而言修改不如重写。

子组件

<template>
  <div class="generate">
    内容
  </div>
</template>
<script>
/**
* @author kong
* @description
*/
export default {
  name: '',
  components: {
  },
  data () {
  },
};
</script>
<style lang='scss' scoped>
.generate{
  // 一些固定样式
}
</style>

父组件

<template>
  <div>
    <button @click="add">新建</button>
    <Modal v-modal="modal">
      <Finance ref="finance"></Finance>
    </Modal>
  </div>
</template>
<script>
/**
* @author kong
* @description
*/
import Finance from "@/view/components"
export default {
  name: '',
  components: {
    Finance
  },
  data () {
    return {
      modal:false,
    };
  },
  created () {
  },
  computed: {},
  methods: {
    add(){
      // 点击新建按钮 获取dom节点
      const dom = this.$refs.finance
      // 直接删除子组件dom节点的class
      dom.$el.classList.remove('generate')
      // 添加新的class类名 就想怎么改就怎么改啦~
      dom.$el.classList.add('finance-modal')
      this.modal = true
    }
  },
};
</script>
<style lang='scss' scoped>
.finance-modal{
}
</style>