道具与数据的关系（vue）

Question

在

ChromePage 组件将 prop 传递给 InventorySectionC:

<inventory-section-component :itemSectionProps="getItemSection">
</inventory-section-component>

InventorySectionC:

<template>
  <div class="inventory-section-component">
    <draggable v-model="itemSectionProps.itemSectionCategory">
      <transition-group>
        <div
          v-for="category in itemSectionProps.itemSectionCategory"
          :key="category.itemSectionCategoryId"
        >
          <!-- <p>{{ category.itemSectionCategoryName }}</p>  -->
          <inventory-section-group-component :itemSectionGroupData="category">
          </inventory-section-group-component>
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import InventorySectionGroupComponent from "./InventorySectionGroupC";
import draggable from "vuedraggable";

export default {
  name: "InventorySectionComponent",
  components: {
    InventorySectionGroupComponent,
    draggable,
    // GridLayout: VueGridLayout.GridLayout,
    // GridItem: VueGridLayout.GridItem,
  },
  props: {
    itemSectionProps: {
      type: Object,
    },
  },
  data() {
    let itemSectionData = itemSectionProps;
    return {
      itemSectionData
    };
  },
};
</script>

<style scoped>
</style>

在行发出警告：

<draggable v-model="itemSectionProps.itemSectionCategory">

:

Unexpected mutation of "itemSectionProps" prop. (vue/no-mutating-props)eslint

为什么（如何？）itemSectionProps 可变？

是否可以在 props 和 data 之间创建绑定（所有可拖动样本都使用数据对象：

https://sortablejs.github.io/Vue.Draggable/#/nested-example https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/nested-example.vue )?

想法是拥有自动更新、嵌套、可拖动的组件。

代码“有效”，但有 warnings/errs:

data()好像看不到props:

还有一件事，哪个“第一”？ Data 还是 props？似乎无法从文档中弄清楚：

https://vuejs.org/v2/guide/instance.html

将道具设置为预定义值：

  props: {
     itemSectionProps: {
       type: Object,
       default: { itemSectionCategory: '' }
      },
   },

给出：

Type of the default value for 'itemSectionProps' prop must be a function. (vue/require-valid-default-prop).

我不确定为什么 vue 期望道具 return 一个函数。

在 props 上添加 default() 后，传递给组件时 props 为空：

https://codesandbox.io/s/sjm0x

Answer 1

（这对于评论来说太长了，但可能已经回答了你需要的）

itemSectionProps:

您的道具定义为：

  props: {
    itemSectionProps: {
      type: Object,
    },
  },

您在模板中引用了该对象的道具

<draggable v-model="itemSectionProps.itemSectionCategory">

Vue 不能假定 itemSectionProps.itemSectionCategory 将来会存在。
您应该给它一个默认值（请参阅 Vue docs）以在该对象中创建预期值。

  props: {
    itemSectionProps: {
      type: Object,
      default() {
        return { itemSectionCategory: '' };
      }
    },
  },

对您在 itemSectionProps 上使用的所有道具执行此操作。

data() 好像看不到道具：

你可以写 this.itemSectionProps 而不是只写 itemSectionProps.
但是 itemSectionProps 已经在 props 中定义了。您可以从 data.

中删除 itemSectionProps

如果您需要更改该值，请使用副本并通过 this.$emit 推广更改。

Answer 2

您可能在调用 props 时未在数据方法上使用 this.。

您也可以如下定义变量 itemSectionData：

    data(){ 
       return {
           itemSectionData: Object.assign({}, this.itemSectionProps)
        }
    }

Object.assign() Object.assign() 方法将所有可枚举的自身属性从一个或多个源对象复制到目标对象。它 returns 目标对象。查看更多详情 here

然后在您的组件中使用新定义的变量 itemSectionData。喜欢：

<draggable v-model="itemSectionData.itemSectionCategory">

如果您想更新道具的值，只需从您的子组件发出一个事件并在父组件上捕获它，如下所示：

    methods:{
     updatePropValues(){
        this.$emit('updateProp', this.yourNewValues);
      }
    }

在父组件上将事件处理为：

<inventory-section-component @updateProp="setNewValues" :itemSectionProps="getItemSection">
  </inventory-section-component>

methods:{
  setNewValues(newValues){
     this.itemSections = newValues;
   }
}

实际查看 here

道具与数据的关系（vue）

Relationship between props and data (vue)

javascript

vue.js

vue-component

vuejs2