vue-reverse/examples/components/category/index.vue

<template>
  <CommonStack title="商品分类" :query="Object.assign({}, query, { parent_id: 0 })">
    <template v-slot:default="{ stackQuery }">
      <CategoryList :query="stackQuery" ref="category" />
      <CommonWrapper name="category-list-2">
        <CategoryList :query="stackQuery" name="category-list-2" />
      </CommonWrapper>
      <CommonWrapper name="category-list-3">
        <CategoryList :query="stackQuery" name="category-list-3" />
      </CommonWrapper>
      <CommonWrapper name="category-sort">
        <CategoryList
          :query="stackQuery"
          name="category-sort"
          @on-refresh="onRefresh" />
      </CommonWrapper>
      <CommonWrapper name="category-product-sort">
        <CommonFilter
          action="getCategoryProductSort"
          :fixedValues="{
            category_id1: stackQuery['category-product-sort']
              ? stackQuery['category-product-sort'].category_id1
              : {}
          }"
        />
      </CommonWrapper>
    </template>
  </CommonStack>
</template>

<script>
import CategoryList from './CategoryList'

export default {
  name: 'category',
  props: {
    query: {
      type: Object,
      required: false,
      default () {
        return {}
      },
    },
  },
  components: {
    CategoryList,
  },
  methods: {
    onRefresh () {
      this.$refs.category.$refs.filter.request()
    },
  },
}
</script>