prop 更新时更新 VueJS 组件数据属性答案

【问题标题】：Updating VueJS component data attributes when prop updatesprop 更新时更新 VueJS 组件数据属性
【发布时间】：2017-11-18 03:37:28
【问题描述】：

我正在构建一个 VueJS 组件，它需要在更新 prop 时更新数据属性，但是它并没有像我预期的那样工作。

基本上，流程是有人通过我拥有的自动完成组件搜索联系人，如果匹配，则向父组件发出事件。

该联系人将属于一个组织，我将数据传递给更新数据属性的组织组件。但是它不会更新它们。

传递给组织组件的道具已更新（通过事件），但数据属性values 未显示此更改。

这是我的组件结构的示意图...

这是我的代码...

父组件

    <template>
        <div>
            <blink-contact
                    :contact="contact"
                    v-on:contactSelected="setContact">
            </blink-contact>

            <blink-organisation 
                    :organisation="organisation" 
                    v-on:organisationSelected="setOrganisation">
            </blink-organisation>
        </div>
    </template>

    <script>
        import BlinkContact from './BlinkContact.vue'
        import BlinkOrganisation from './BlinkOrganisation.vue'

        export default {
            components: {BlinkContact, BlinkOrganisation},

            props: [
                'contact_id', 'contact_name', 'contact_tel', 'contact_email',
                'organisation_id', 'organisation_name'
            ],

            data () {
                return {
                    contact: {
                        id: this.contact_id,
                        name: this.contact_name,
                        tel: this.contact_tel,
                        email: this.contact_email
                    },

                    organisation: {
                        id: this.organisation_id,
                        name: this.organisation_name
                    }
                }
            },

            methods: {
                setContact (contact) {
                    this.contact = contact
                    this.setOrganisation(contact.organisation)
                },

                setOrganisation (organisation) {
                    this.organisation = organisation
                }
            }
        }
    </script>

子组件（blink-organization）

        <template>
        <blink-org-search
                field-name="organisation_id"
                :values="values"
                endpoint="/api/v1/blink/organisations"
                :format="format"
                :query="getQuery"
                v-on:itemSelected="setItem">
        </blink-org-search>
    </template>

    <script>
        export default {
            props: ['organisation'],

            data() {
                return {
                    values: {
                        id: this.organisation.id,
                        search: this.organisation.name
                    },
                    format: function (items) {
                        for (let item of items.results) {
                            item.display = item.name
                            item.resultsDisplay = item.name
                        }
                        return items.results
                    }
                }
            },

            methods: {
                setItem (item) {
                    this.$emit('organisationSelected', item)
                }
            }
        }
    </script>

如何在 prop 更改时更新子组件的数据属性？

谢谢！

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

使用watch。

watch: {
    organisation(newValue){
        this.values.id = newValue.id
        this.values.search = newValue.name
    }
}

然而，在这种情况下，您似乎可以只使用计算属性而不是数据属性，因为您所做的只是将值传递给您的搜索组件。

computed:{
    values(){
        return {
            id: this.organisation.id
            search: this.organisation.name
        }
    }
}

【讨论】：