从刀片 Laravel 传递时，Prop 反应性不起作用

Posted 2023-02-22

【中文标题】从刀片 Laravel 传递时，Prop 反应性不起作用

【英文标题】：Prop reactivity not working when passed from blade Laravel

【发布时间】：2020-12-03 02:01:35

【问题描述】：

我试图将 Blade 文件中的 prop 传递给 Vuejs 组件名称 AppMessages

<app-messages :messages=" $messages "></app-messages>

然后根据selfOwned boolean 呈现消息。

 <app-message v-for="message in messages" :message="message" :key="message.id" v-if="message.selfOwned === false"></app-message>
 <app-message-own v-for="message in messages" :message="message" :key="message.id" v-if="message.selfOwned === true"></app-message-own>

在子组件中，我通过总线事件创建时传递一条消息

 let tempBuitMessage = this.tempMessage()
 Bus.$emit('message.added', tempBuitMessage);

在 props 中定义 this.messages

 export default 
props: 
    messages: 
        required: true,
        type: Array
    
,

在父组件AppMessages我设置了listner

mounted() 
    Bus.$on('message.added', data => 
        this.messages.unshift(data)
        console.log(this.messages)
    );
,

问题：

我预计新传递的消息会在聊天中出现，但我可以在控制台中看到它（没有错误）但没有呈现。

【问题讨论】：

你能说明 this.messages 是在哪里定义的吗？

你能再检查一下我的问题吗？我刚刚更新了

对不起，我有点不清楚。这个定义在 app-messages 的 props 中吗？因为您无法在组件中操作自己的道具。我假设这就是你没有得到反应的原因，因为它是一个数组，你可能不会收到警告。

不是 100% 肯定，但我会给你一个答案，希望你可以重构。

好的，试试看。不是 100%，因为 Vue 的反应性对于数组和对象有时会变得非常奇怪。

【参考方案1】：

你不能从组件内部操作组件的 props。数据通过道具向下传递给孩子，通过事件向上传递给父母（不是指公共汽车）。

您应该能够使用计算属性获得响应性，或者只是将挂载消息分配给数据属性。

<template>
...
 <app-message v-for="message in model" :message="message" :key="message.id" v-if="message.selfOwned === false"></app-message>
 <app-message-own v-for="message in model" :message="message" :key="message.id" v-if="message.selfOwned === true"></app-message-own>
...
</template>

<script>
export default 
    name: 'app-messages',

    props: 
        messages: 
            required: true,
            type: Array
        
    ,

    data() 
        return 
            model: null,
        ;
    ,

    created() 
        this.model = this.messages;
    ,

    mounted() 
        Bus.$on('message.added', data => 
            this.model.unshift(data)
            console.log(this.messages)
        );
    ,

</script>

【讨论】：

谢谢 :) 我可以知道为什么我不能从子组件修改道具吗？

是vue的设计选择。更新这样的道具不是“观看”的。见vuejs.org/v2/guide/components.html#Organizing-Components 和vuejs.org/v2/guide/reactivity.html#ad