javascript - 无法从组件属性设置 VueJs 组件数据值

Question

由于某种原因，customer_data.customerReference 的值永远不可用，但我可以使用 Chrome 调试工具看到数据存在于 prop 中，并且已成功从我的应用传递到组件。

Vue.component("mycomponent", {
    template: '#my-component-template',
    props: ["customer_data"],
    data() {
        return {
              myData: 'This works fine!',
            form_data: {
                customerRef: this.customer_data.customerReference
            }
    }
}
});

new Vue({
    el: "#app",
    data() {
        return {
            customer: {
                customerReference: 007
            }
        };
    }
});

这是我的标记，包括模板:

<div id="app">
    <mycomponent customer_data="customer" />
</div>

<script type="x-template" id="my-component-template">
    <div>
        <p>{{form_data.customerRef}}</p>
        <p>{{myData}}</p>
    </div>
</script>

请参阅以下带有简化示例的 JsFiddle: https://jsfiddle.net/ProNotion/a8c6nqsg/20/

我在这里遗漏了什么或实现不正确？

Answer 1

您应该使用 v-bind: 或仅 : 绑定(bind)它

   <div id="app">
      <mycomponent :customer_data="customer" />
    </div>

https://v2.vuejs.org/v2/guide/components-props.html