vue.js 中的公共属性显示警告答案

【问题标题】：public properties in vue.js showing warningvue.js 中的公共属性显示警告
【发布时间】：2018-07-24 00:32:52
【问题描述】：

组件代码

<template lang="html">
    <div class="chat-users">
        <ul class="list-unstyled">
            <li v-for="chatuser in chatusers" class="left clearfix">
                {{ chatuser.UserName }}
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        props: ["chatusers"],
        created() {
            axios.post("some url").then(response => {
                this.chatusers = response.data.Data;
            });
        }
    }
</script>
<style>

</style>

一切正常，但我收到警告。

避免直接改变prop，因为值会被覆盖每当父组件重新渲染时。相反，使用数据或基于道具值的计算属性。道具被变异： “闲聊者”

【问题讨论】：

你需要chatusers作为道具吗？如果不使用 data 函数而不是 props

标签： vue.js laravel-5.5

【解决方案1】：

根据 Vue.js 的数据流，从 parent 收到的 props 不应该被子组件修改。请参阅 the official documentation 和此 Stack Overflow answer。

正如您的警告所建议的：“使用基于道具值的数据或计算属性”，在您的情况下是从 axios 调用收到的响应。

【讨论】：

【解决方案2】：

有一个解释为什么 prop 不应该在 vue documentation 中发生变异。如果你需要改变状态，也许你需要一个数据来代替。

喜欢：

    export default {
        data () { return { chatusers: null } },
        created() {
            axios.post("some url").then(response => {
                this.chatusers = response.data.Data;
            });
        }
    }

【讨论】：

【解决方案3】：

这不是改变 props 的最佳方式，因为父级控制着这些数据，任何更改都会覆盖子级数据，from the docs:

另外，每次父组件更新时，所有的props在子组件将使用最新值刷新。这意味着您不应该尝试改变孩子体内的道具零件。如果你这样做了，Vue 会在控制台中警告你。

【讨论】：