sub-components v1.0.3

sub-components

类似于Vue中component的理念。渲染一个“元组件”为动态组件。根据传入 com 的值，来决定哪个组件被渲染。

区别点在于sub-components支持不定层级的“元组件”的渲染。

用法示例

1. npm install sub-components
2. 在页面中引用sub-components和元组件（以Tabs组件为例）

import SubComponents from "sub-components";
import Tabs from "./components/tabs";
export default {
  components: {
    SubComponents,
    Tabs,
  },

3. 在html中使用该组件，com中传入元组件的名称

<sub-components
  com="Tabs"
  :dataList="tabData"
  transferLevel
  @switchTab="switchTab"
>
  <p>{{ content }}</p>
</sub-components>
<script>
export default {
  // ...
  data() {
    return {
      tabData: [
        [1, 2, 3],
        [1, 2],
        [1, 2, 3, 4]
      ],
      path: [0, 0, 0],
    };
  },
  computed: {
    content: function() {
      return 'content' + this.path.reduce((acc, cur) => acc + '-' + (cur + 1), '');
    },
  },
  methods: {
    switchTab(data) {
      const { level, index } = data;
      this.$set(this.path, level, index);
    },
  },
}
</script>

4. 效果展示

属性

Attributes

slots

本地开发

• git clone https://github.com/xichi/vue-sub-components
• npm install
• npm run dev