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 documentation中变异。如果你需要改变状态，也许你需要一个数据。

喜欢：

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

Answer 2

根据Vue.js数据流，从父组件接收的道具不应由子组件修改。请参阅the official documentation和此Stack Overflow answer。

正如您的警告所示：＆＃34;根据道具价值＆＃34;使用数据或计算属性，在您的情况下，是从axios呼叫收到的响应。

Answer 3

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

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

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

3 个答案: