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

Posted 2023-02-23

【中文标题】vue.js 中的公共属性显示警告

【英文标题】：public properties in vue.js showing warning

【发布时间】：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

【参考方案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 会在控制台中警告你。