props 和 data 的关系(vue) [英] Relationship between props and data (vue)

问题描述

在

还有一件事，第一"是什么?Data 还是 props?似乎无法从文档中弄清楚:

我不知道为什么 vue 期望 props 返回一个函数.

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

https://codesandbox.io/s/sjm0x

解决方案

(评论太长了，但可能已经回答了您的需要)

itemSectionProps:

你的道具定义为:

 道具:{itemSectionProps:{类型:对象，},},

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

Vue 不能假设 itemSectionProps.itemSectionCategory 将来会存在.
你应该给它一个默认值(见 Vue docs)在该对象中创建预期值.

 道具:{itemSectionProps:{类型:对象，默认() {返回 { itemSectionCategory: '' };}},},

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

data() 似乎看不到道具:

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

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

In

https://codesandbox.io/s/v9pp6

the ChromePage component passes a prop to 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>

gives a warning at line:

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

:

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

Why (how?) is itemSectionProps mutable?

Can a binding be created between props and data (all draggable samples use a data object:

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

The idea is to have auto updating, nested, draggable components.

The code as is "works" but there are warnings/errs:

data() can't seem to see props:

And one more thing, which comes "first"? Data or props? can't seem to figure it out from the docs:

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

Setting the props to a predefined value:

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

gives:

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

I'm not sure why vue expects props to return a function.

After adding a default() onto props, props are empty when passed on to components:

https://codesandbox.io/s/sjm0x

解决方案

(this grew too long for a comment, but probably already answers what you need)

itemSectionProps:

Your props are defined as:

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

You reference a prop of that object in your template

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

Vue cannot assume itemSectionProps.itemSectionCategory will exist in the future.
You should give it a default (see Vue docs) to create the expected values in that object.

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

Do this for all the props you use on itemSectionProps.

data() can't seem to see props:

You can write this.itemSectionProps instead of only itemSectionProps.
But itemSectionProps is already defined in props. You can just remove itemSectionProps from data.

If you need to change that value, use a copy and promote changes with this.$emit.

这篇关于props 和 data 的关系(vue)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！