Vue Props в дочернем компоненте

У меня есть два компонента: один - это родительский элемент, это случайная страница, а дочерние элементы - это компонент, который будет использовать и другие компоненты для сеток.

Родитель

<template>
...
  <DataTable
   :items="items"
   :fields="fields"
   :currentPage="currentPage"
   :perPage="perPage"
   :filter="filter"
   :sortBy="sortBy"
   :sortDesc="sortDesc"
   :sortDirection="sortDirection">
  </DataTable>
...
</template>

<script>
 import DataTable from "./DataTable.vue";

 components: {
  DataTable,        
 },
 data: function(){
  return {
   fields: [],
   items: [],
   currentPage: 1,
   perPage: 2,
   filter: null,
   sortBy: null,
   sortDesc: false,
   sortDirection: 'asc',
  }
 }
</script>

Ребенок

<template>
...
  <b-table 
   show-empty
   stacked="md"
   :items="items"
   :fields="fields"
   :current-page="currentPage"
   :per-page="perPage"
   :filter="filter"
   :sort-by="sortBy"
   :sort-desc="sortDesc"
   :sort-direction="sortDirection">
  </b-table>
  <b-row>
   <b-col md="6" class="my-1">
    <b-pagination 
     :total-rows="items.length" 
     :per-page="perPage" 
     v-model="currentPageComputed"
     class="my-0" />
   </b-col>
  </b-row>
...
</template>

<script>
 props: {
  items: Array,
  fields: Array,
  currentPage: Number,
  perPage: Number,
  filter: String,
  sortBy: String,
  sortDesc: Boolean,
  sortDirection: String,
 },
 computed: {
  currentPageComputed: {
   get () {
    return this.$props.currentPage
   },
   set (i) {
    this.$props.currentPage = i;
   }
  },    
 },
</script>

Наконец, выглядит примерно так: Visual

при использовании пагинации для смены страницы; работает Но пришлите мне эту ошибку:

Ошибка инструмента разработчика

Я читал, что эта проблема относится к «props в Vue - это антипаттерн».

Итак, как исправить?


vue.js vue-props
person carlos-silva    schedule 25.05.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Самое простое решение - использовать событие @input b-pagination для передачи измененного значения от дочернего к родительскому:

<b-pagination 
     :total-rows="items.length" 
     :per-page="perPage" 
     :value="currentPage"
     @input='emitPageValue'
     class="my-0" />
   </b-col>

И в методах:

methods: {
 emitPageValue(value){
   this.$emit('update:current-page', value)
 }
}

Затем в родительском элементе вы должны принять измененное значение, применив модификатор .sync к опоре, чтобы он также обработал событие @update:

<template>
...
  <DataTable
   :items="items"
   :fields="fields"
   :current-page.sync="currentPage"
   :per-page="perPage"
   :filter="filter"
   :sort-by="sortBy"
   :sort-desc="sortDesc"
   :sort-direction="sortDirection">
  </DataTable>
...
</template>

NB: Также обратите внимание на соглашение об именах для реквизита в шаблоне. Рекомендуется использовать kebab-case для реквизита в шаблоне и получить доступ к тому же свойству в camelCase в Javascript.

person Igor Moraru    schedule 25.05.2020