道具不与父实例数据链接

Question

我有一个“产品”组件。来自父母的数据不会传递给孩子。它保持设置为从主模板输入的默认值。根据保费价值，运费免费或费用为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

提前致谢。

Answer 1

您需要使用来自父级的data作为product的绑定源。

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

在父母中更改data.premium现在应该传播给孩子。

Answer 2

您可以在文档中看到：https://vuejs.org/v2/guide/components-props.html#Passing-a-Boolean

在你的情况下你可以试试这个：

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

“premium”中的任何更改都应更改“Product”组件

Answer 3

看看这里:)

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.. -->