Vue：props 不会自动分配；手动分配时 - 避免直接改变道具 - 错误

Posted 2023-02-22

【中文标题】Vue：props 不会自动分配；手动分配时 - 避免直接改变道具 - 错误

【英文标题】：Vue: props doesn't get assigned automatically; when assigned manually - Avoid mutating a prop directly - error

【发布时间】：2020-09-17 01:41:09

【问题描述】：

我有两个 vue 组件：GetAnimal.vue 和 DisplayAnimal.vue。 GetAnimal.vue 使用路由器推送将带有动物数据的 JSON 发送到 DisplayAnimal.vue。 DisplayAnimal.vue 显示该数据。它的工作原理是这样的：我转到/getanimal，单击一个触发getAnimal() 功能的按钮，该功能将我带到/viewanimal（通过路由器推送）：

GetAnimal.vue：

<script>
    import axios from 'axios';

    export default 
        data: function () 
            return 
                name: 'defaultAnimal',
                defaultanimal: 
                    name: 'Cat',
                    furColor: 'red',
                    population: '10000',
                    isExtinct: false,
                    isDomesticated: true
                ,
                animal: String
            
        ,
        methods: 
            getAnimal: function () 
                console.log("this.defaultanimal: " +
                    JSON.stringify(this.defaultanimal));

                this.$router.push(
                     name: "viewanimal",
                    params: 
                         animal: this.defaultanimal
                     
                 );

            ,
...

DisplayAnimal.vue：

<template>
    <div>
        <h1>Displaying animal:</h1>
        <p>Animal name: animal.name</p>
        <p>Fur color: animal.furColor</p>
        <p>Population: animal.population</p>
        <p>Is extinct: animal.isExtinct</p>
        <p>Is domesticated: animal.isDomesticated</p>

    </div>
</template>

<script>
    import axios from "axios";

    export default 
        props:  
            animal:  
                name: 
                    type: String
                ,
                furColor:  
                    type: String
                ,
                population: String,
                isExtinct: String,
                isDomesticated: String
            
        ,

        name: "DisplayAnimal",

        methods: 

        ,
        created() 
            console.log("animal param: " +
                JSON.stringify(this.$route.params.animal));
            this.animal = this.$route.params.animal;
        
    ;
</script>

动物显示得很好：

但是我在控制台中收到警告：

明确分配 props 的 this.animal = this.$route.params.animal; 行可能是警告的原因。

但是，如果我删除该行，则动物根本不会显示：

我有这个

router.js：

    path: "/viewanimal",
    name: "viewanimal",
    component: () => import('./views/DisplayAnimal.vue'),
    props: animal: true
,

    path: "/getanimal",
    name: "getanimal",
    component: () => import('./views/GetAnimal.vue')

我认为设置props: animal: true 可以确保它是自动分配的，但似乎并非如此。我该如何解决？

【参考方案1】：

Well updating prop directly is an antipattern

当您知道 animal 组件不是将数据传递给它的父组件的一部分时，在 DisplayAnimal 组件中拥有 animal 属性也是没有意义的。 animal 应该在 data 内，这样你就可以在 created 回调中更新。

示例

data() 
  return 
    loading: true, // perhaps you'd like to show loader before data gets fetched
    animal: 
        id: -1,
        name: '',
        furColor: '',
        population: 0,
        isExtinct: false,
        isDomesticated: false
    
  
,
created() 
  this.animal = this.$route.params.animal;
  this.loading = false;

【讨论】：

那有什么道具呢？从我读到的文档中，他们使用道具作为存储路由器参数的地方 - 自动

为什么要包含// perhaps you'd like to show loader before data gets fetched 行？数据不会马上转到DisplayAnimal.vue 组件吗？我不发出任何服务器请求或任何东西，只是将数据定向到/viewanimal。

Props 用于单向数据传输，即从父节点到子节点。如果一个孩子需要修改父数据，它应该发出某种事件，父有责任监听然后改变它的数据。

@Terry 但在这里我不修改任何数据 - 只是显示它。不是单向传输吗？

单向传输是指父组件向子组件传递数据的设计。在 Spa 框架中很常见。在这种情况下，没有父组件。相反，您有两个独立的组件，它们依赖于某些路由机制/服务。附加的东西。是的，您正在修改数据。在created 发生之前，animal 属性的初始值是多少？可能是undefined/null.