道具未与 parent 实例数据链接

Question

我有一个 "Product" 组件。来自 parent 的数据未传递给 child。它保持设置为从主模板输入的默认值。根据溢价，免运费或 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.. -->

道具未与 parent 实例数据链接

Props not linking with parent instance data

javascript

parent

parent-child

prop

vue.js