Vue组件的行为可以像wordpress短代码属性一样吗

时间:2019-06-05 20:27:56

标签: vue.js vuejs2 vue-component

Vue组件的行为类似于wordpress的简码属性吗?例如,在[wp-shortcode post_type="post"]中,我可以在简码中定义帖子类型,然后将相应地提取数据。

在Vue中可以做类似的事情吗?例如<grid-one type="posts" /><grid-one type="videos" />。网格一标记中的类型将更改数据中的request.type

GridOne.vue

<template>
  <main class="site-content">
    <div class="container">
      <section v-if="posts.length" class="articles-list">
        <post-item
          v-for="post in posts"
          :key="post.id"
          :post="post"
        />
        <pagination
          v-if="totalPages > 1"
          :total="totalPages"
          :current="page"
        />
      </section>
    </div>
  </main>
</template>

<script>
import PostItem from '@/components/template-parts/PostItem'
import Pagination from '@/components/template-parts/Pagination'

export default {
  name: 'GridOne',
  components: {
    PostItem,
    Pagination
  },
  props: {
    page: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      request: {
        type: 'posts',
        params: { 
          per_page: this.$store.state.site.posts_per_page,
          page: this.page
        }, 
        showLoading: true 
      },
      totalPages: 0
    }
  },
  computed: {
    posts() {
      return this.$store.getters.requestedItems(this.request)
    }
  },
  methods: {
    getPosts() {
      return this.$store.dispatch('getItems', this.request)
    },
    setTotalPages() {
      this.totalPages = this.$store.getters.totalPages(this.request)
    }
  },
  created() {
    this.getPosts().then(() => this.setTotalPages())
  }
}
</script>

0 个答案:

没有答案