Vue 组件使用 混入（Mixin）功能

  import { FccListMixin } from '@/mixins/FccListMixin'
  export default {
    name: 'SysFillRuleList',
    mixins: [FccListMixin],
    components: { SysFillRuleModal },
    data () {
      return {
        description: '页面',
              }
            } 

             }

解析代码

这段代码表明你的 Vue 组件使用了 混入（Mixin） 功能，并从一个或多个外部模块中导入了共享的逻辑或常量。

具体说明

1. import { FccListMixin } from '@/mixins/FccListMixin '

   • FccListMixin 是一个导入的混入对象，它位于 @/mixins/FccListMixin .js 文件中。
   • 混入（Mixin）是一种将可复用的逻辑封装到单独的文件中，然后可以在多个组件中复用的机制。
   • 在组件中使用 mixins: [FccListMixin ]，相当于将 FccListMixin 中定义的 data、methods、computed 等注入到当前组件中。

例子：YcListMixin 的可能结构：

export const FccListMixin = {
  data() {
    return {
      queryParam: {},
      loading: false,
      dataSource: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  methods: {
    fetchData() {
      // 获取数据的通用逻辑
      console.log("Fetching data...");
    },
  },
};

在你的组件中引用后，queryParam、fetchData 方法和其他内容就自动可用了。

在组件中的效果：

export default {
  name: 'SysFillRuleList',
  mixins: [FccListMixin],
  mounted() {
    this.fetchData(); // 直接调用 Mixin 提供的逻辑
  },
};

总结

这段代码的作用是：

1. 引入复用的逻辑：

   • FccListMixin 提供了一些通用功能，比如数据加载、分页处理、查询参数管理等，避免在多个组件中重复编写相同逻辑。