Передача свойств объекта в качестве реквизита Vuejs

Question

привет всем, У меня есть некоторая путаница. У меня есть два компонента (дочерний и родительский компонент), и я передаю свойства объекта как реквизит

<child :child-data="abc" ></child>
Vue.component('childComponent', {
props: ['childData'],
 data: function(){
    return {
        count:this.childData,// recommend use Vue.util.extend
    }
 },
});

Vue рекурсивно преобразует свойства «данных» childComponent в методы получения / установки, чтобы сделать его «реактивным». Так почему же он не связывает данные автоматически с шаблоном? Я прочитал некоторые рекомендуют использовать Vue.util.extend Почему Vue.util.extend?

UPDATE

мой пример: https://jsfiddle.net/hoanghung1995/xncs5qpd/56/

когда я устанавливаю значение по умолчанию parentData, childDataA будет отображать его. Но когда я использую v-модель для переопределения parentData, то childDataA не «реагирует». Я должен использовать «watch» для переопределения «data», аналогично childDataB

Пример Vue.util.extend: https://jsfiddle.net/sm4kx7p9/3/

Почему Vue.util.extend работает нормально, но не использует "watch" ?,

Answer 1

Чтобы объяснить, что на самом деле происходит в фоновом режиме, Линус Борг предлагает отличный ответ на ваш вопрос . Подводя итог его ответу, причина, по которой ваш подход не работает, заключается в том, что data является вычисляемым свойством, а props передается как примитивные типы. Другими словами, data делает копию вашего реквизита (вместо передачи по ссылке).

Еще один способ обойти это - объявить ваши childData как вычисленные свойства вместо данных, т. Е .:

computed: {
    childDataA() {
        return this.childPropsA;
    },
    childDataB() {
        return this.childPropsB;
    }
}

Причина использования computed заключается в том, что вычисляемые свойства теперь отслеживают изменения своих зависимостей.

Пример проверки концепции на основе вашей оригинальной скрипки:

Vue.component('child', {
  props: ['childPropsA', 'childPropsB'],
  template: "#sub",
  computed: {
    childDataA() {
      return this.childPropsA;
    },
    childDataB() {
      return this.childPropsB;
    }
  }
});
new Vue({
  el: '#app',
  data: {
    parentData: '123'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  parentData:{{parentData}}<br>
  <input type="text" v-model="parentData">
  <child :child-props-a="parentData" :child-props-b="parentData"></child>
</div>
<template id="sub">
  <div>
    <p> 1- {{ childDataA }}</p> 
    <p> 2- {{ childDataB }}</p> 
    </div>
</template>

Приведенный выше подход функционально идентичен подходу data + watch, но я нахожу его довольно громоздким и добавляет в ваш код ненужную многословность:

data: function() {
    return {
      childDataA: this.childPropsA,
      childDataB: this.childPropsB
    };
  },
  watch: {
    childPropsA() {
      this.childDataA = this.childPropsA;
    },
    childPropsB() {
      this.childDataB = this.childPropsB;
    }
  }

Vue.component('child', {
  props: ['childPropsA', 'childPropsB'],
  template: "#sub",
  data: function() {
    return {
      childDataA: this.childPropsA,
      childDataB: this.childPropsB
    };
  },
  watch: {
    childPropsA() {
      this.childDataA = this.childPropsA;
    },
    childPropsB() {
      this.childDataB = this.childPropsB;
    }
  }
});
new Vue({
  el: '#app',
  data: {
    parentData: '123'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  parentData:{{parentData}}<br>
  <input type="text" v-model="parentData">
  <child :child-props-a="parentData" :child-props-b="parentData"></child>
</div>
<template id="sub">
  <div>
    <p> 1- {{ childDataA }}</p> 
    <p> 2- {{ childDataB }}</p> 
    </div>
</template>

Answer 2

Часы только смотрят свойства, которые действительно реактивны. Проходящие объекты не делают их свойства реактивными. Просто передайте свойства, которые вы хотите, в качестве реквизита. С помощью Vue.util.extend вы заставляете свойство быть реактивным в этом случае.