vue.js - 子组件中的 Vue 道具

Question

我有两个组件，一个是父级，是一些随机页面，子级是一个将使用的组件，更多的组件用于网格。

家长

<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>

最后看起来类似于：

使用分页换页时；工作但是，给我这个错误：

我读到这个问题是指“Vue 中的道具是一种反模式”。

那么，如何修复呢？

Answer 1

最简单的解决方案是使用 b-pagination 的 @input 事件将更改的值从子级发送到父级：

<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)
 }
}

然后，在 parent 中，您必须通过将修饰符 .sync 应用于 prop 来接受更改的值，因此它还将处理 @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>

注意：还要注意模板中道具的命名约定。建议在模板中对 props 使用 kebab-case 并在 Javascript 中访问 c​​amelCase 中的相同属性。