mixins

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import twoLevelSelectInit from '@/mixins/twoLevelSelectInit'

@Component({
  name: 'DataList',
  components: {

  },
  mixins: [twoLevelSelectInit]
})
</script>

注册组件

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Pagination from '@/components/Pagination/index.vue'
import SingleViewDetail from './SingleViewDetail.vue'
import StorageUpload from '@/components/StorageUpload/index.vue'
import InsertData from './InsertData.vue'
import twoLevelSelectInit from '@/mixins/twoLevelSelectInit'

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e106d6bf63f46eb9ef8ad6c7074a34b~tplv-k3u1fbpfcp-watermark.image?)
@Component({
  name: 'DataList',
  components: {
    Pagination,
    SingleViewDetail,
    StorageUpload,
    InsertData
  },
  mixins: [twoLevelSelectInit]

})
</script>

组件传值,定义事件,方法,监听

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
export default class extends Vue {
    @Prop({ default: false }) private isActive!: boolean
  
    private iForm = {
      firstClass: ''
    }
    
    private toggleClick() {
      this.$emit('toggle-click')
    }
  
    @Watch('chartOption', { deep: true })
    onChartOptionChange() {
      this.drawGraph()
    }
    
    @Watch('propEditData', { immediate: true, deep: true })
    onPropDataChange(newVal, oldVal) {
      const iForm = JSON.parse(JSON.stringify(newVal))
      if (iForm.propType === '选项') {
        iForm.iType = 1
      } else if (iForm.propType === '文本') {
        iForm.iType = 2
      } else if (iForm.propType === '数字') {
        iForm.iType = 3
      } else {
        iForm.iType = 4
      }
      if (iForm.propRange) {
        this.tagsList = JSON.parse(newVal.propRange)
      }
      this.iForm = iForm
    }

}
</script>