如何在不覆盖的情况下定义 vue 组件 prop 结构答案

【问题标题】：How to define vue component prop structure without overriding it如何在不覆盖的情况下定义 vue 组件 prop 结构
【发布时间】：2016-06-01 23:44:45
【问题描述】：

我有多个组件实例，它们的状态将由父级管理，所以我想通过组件上的 props 传递这个状态。如果我在组件中定义了 prop 的默认对象属性，那么当我将一个空对象传递给它时，它们将被覆盖。

html:

<div id="app">
  <my-component :state="state1"></my-component>
  <my-component :state="state2"></my-component>
  <my-component :state="state3"></my-component>
</div>

js:

var MyComponent = Vue.extend({
  template: '<pre>{{ state | json }}</pre>',
  props: {
    state: {
        type: Object,
      default: function() {
        return {
          a: null,
          b: [],
          c: {}
        }
      }
    }
  }
})

Vue.component('my-component', MyComponent)

new Vue({
  el: '#app',
  data: {
    state1: {
        a: 1
    },
        state2: {},
        state3: {
        b: 2
    },

  }
})

查看示例：https://jsfiddle.net/pfmfdg8x/2/

那么如何在不定义父组件的所有潜在属性的情况下操作子组件的属性呢？如果该属性从一开始就不存在，则不会观察到更改。

【问题讨论】：

你试过vuejs.org/guide/components.html#Prop_Validation 吗？它基本上允许您忽略无效数据

标签： vue.js

【解决方案1】：

这个问题迟到了，你的小提琴已经做了你所期望的（基于问题）。

我遇到了类似的问题，道具没有按我的预期工作，我的想法是使用组件来允许用户在几个地方选择某些选择。父母需要显示这些值并在发生变化时将其读回。我将组件状态与父道具状态分开，例如：

Vue.extend({
    replace: true,
    template: '<span v-for="element in fromComponent"' +
            '<label>' +
                '<input type="checkbox" v-model="element.checked" /> {{ element.label }}' +
            '</label>' +
        '</span>',
    data: function () {
        return {
            fromComponent: [
                { label: 'First', checked: false },
                { label: 'Second', checked: false }
            ],
            busy: false
        };
    },
    props: {
        fromParent: {
            twoWay: true
        }
    },
    watch: {
        fromComponent: {
            handler: 'updateParent',
            deep: true
        },
        fromParent: {
            handler: 'updateComponent',
            deep: true
        }
    },
    methods: {
        updateParent: function () {
            var index, element;

            // Avoid an update loop
            this.busy = true;

            for (index in this.fromComponent) {
                element = this.fromComponent[index];

                // Map the component value to the proper prop value
                this.$set(['fromParent[', index, '].checked'].join(''), !!element.checked);
            }

            this.busy = false;
        },
        updateComponent: function () {
            var index, element;

            if (this.busy) {
                return;
            }

            for (index in this.fromParent) {
                element = this.fromParent[indicator];
                this.$set(['fromComponent[', index, '].checked'].join(''), !!element.checked);
            }
        }
    },
    ready: function () {
        // Set the component data to match the values from the parent
        this.updateComponent();
    }
});

【讨论】：