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

Question

组件代码

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

Answer 1

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

喜欢：

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

Answer 2

根据 Vue.js 数据流，从父组件接收到的 props 不应该被子组件修改。 请参阅官方文档和此 Stack Overflow答案。

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

Answer 3

这不是改变道具的最佳方式，因为父级控制着这些数据，并且任何更改都会覆盖子级数据，来自文档：

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