Блог

Главная - Вопросы по программированию - Реквизиты, не связанные с данными родительского экземпляра

Реквизиты, не связанные с данными родительского экземпляра

#javascript #vue.js #parent-child #parent #prop

#javascript #vue.js #родитель-потомок #родительский #реквизит

Вопрос:

У меня есть компонент «Продукт». Данные от родительского экземпляра не передаются дочернему. Для него остается установленным значение по умолчанию, введенное из основного шаблона. В зависимости от стоимости премиум-класса, доставка бесплатна или стоит 2,69.

Я пытался понять, используя вводные видеоролики VueMastery.. Но я все еще испытываю трудности, не могли бы вы, пожалуйста, объяснить, в чем проблема?

 var app = new Vue({
    el: '#app',
    data: {
        premium: false // Changing the value here doesn't make any change
    }
})
  
 Vue.component('product', {
    props: {
        premium: {
            type: Boolean,
            required: true
        }
    }, 
    template: ``,
    data() {},
    computed: {
        shipping() {
            if(this.premium) {
                return "Free";
            }
            return 2.69;
        }
    }
}
  
 <div id="app">
    <product :premium="true"></product> // Changing this, it works..
</div

Заранее спасибо.

Ответ №1:

Вам нужно использовать data из родительского в качестве источника привязки для product .

 <div id="app">
 <product :premium="premium"></product>
</div>

Изменение data.premium в родительском теперь должно распространяться на дочерний.

Ответ №2:

Взгляните сюда 🙂

 var app = new Vue({
  el: '#app',
  data: {
    premium: true, // Changing the value here also works
    shipping: "Free"
  }
})

Vue.component('product', {
  template: '',
  props: {
    premium: {
      type: Boolean,
      required: true
    }
  },
  data() {},
  computed: {
    shipping() {
      if (this.premium) {
        return "Free";
      }
      return 2.69;
    }
  }
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <product :premium="premium">{{ premium }} - {{ shipping }}</product>

  <div> {{ premium }} - {{ shipping }}</div>

</div>
<!-- Changing this, it works.. -->

Ответ №3:

Вы можете увидеть в документации:https://v2.vuejs.org/v2/guide/components-props.html#Passing-a-Boolean

в вашем случае вы можете попробовать это:

 <div id="app">
    <product v-bind:premium="premium"></product>
</div>

Любое изменение в «premium» должно изменить компонент «Product»