[Vuejs]-Vue – How to I extract template to a mixin?

by

3👍

✅

Mixins doesn’t come with templates. Imagine you attached two mixins with templates to a component. How would the template of the mixins be merged?

I think this situation rater calls for using a component with a <slot />. You can still do what you want, just passing in the properties to the wrapper component. If you have any properties you need to pass on to the slotted component, you can pass variables to the slotted scope.
So instead of your mixin you would have the following wrapper component:

<template>
  <div>
    <el-table v-bind="$attrs">
      <slot v-bind:filteredData="filteredData" />
    </el-table>
    <pagination ... />
  </div>
</template>

<script>
export default {
  name: 'WrapperElTable',
  props: { ... your required properties ... },
  computed: {
    filteredData() { return stuff; }
  },
  ...
};
</script>

And in your two separate components you would use this component like this:

<template>
  <WrapperElTable :raw-data="rawData" :list-query="listQuery">
    <template v-slot:default="{ filteredData }">
      ...do stuff with filteredData, specific to ProjectList
    </template>
  </WrapperElTable>
</template>

<script>
export default {
  name: 'ProjectList',
  components: {WrapperElTable},
  ...
};
</script>

Any rawData, listQuery, etc. can simply be passed as props to your base component.

👤Nikolaj Dam Larsen

Leave a comment