道具不变怎么看？

Posted 2023-02-22

【中文标题】道具不变怎么看？

【英文标题】：How to watch prop even if it does not change?

【发布时间】：2021-03-19 17:00:03

【问题描述】：

我有一个与道具同名的观察者。该道具是在某些事件的父组件中动态设置的。每次在父组件上触发事件时，我都需要在子组件中触发具有属性值的某些功能的东西——即使它设置的道具是相同的。是否有任何观察者选项或其他处理这种情况的方法可以让我这样做？

我尝试了什么（这是在Post 组件中）：

watch: 
    replyClicked:
    
        handler(newVal, oldVal)
        
            console.log(newVal, oldVal);
        ,
        immediate:true
    
,

console.log 仅在 newVal 与 oldVal 不同时打印，即使它们相同，我也需要一些函数来触发。父组件如下所示：

<RenderPost @onReply="onReply" />
<Post :replyClicked="replyClicked" />

这些是父数据和方法：

data()

    return 
        replyClicked : null
    
,
methods :

    onReply(id)
    
        this.replyClicked = id;
    

【参考方案1】：

您可以使用immediate 选项：

watch:
  yourProp:
   handler(newval,oldVal)

   ,
   immediate:true,
   deep:true //if the prop is an object or an array

 

编辑

由于旧值与新值相同，您可以尝试此解决方法，通过添加一个始终更改的字段将道具定义为对象：

data()

    return 
        replyClicked : 
          changeCount:0,
          id:null
         
    
,
methods :

    onReply(id)
    
        this.replyClicked =id, changeCount:this.replyClicked.changeCount+1
    

子组件：

watch: 
    replyClicked:
    
        handler(newVal, oldVal)
        
            console.log(newVal, oldVal);
        ,
        immediate:true,
        deep:true
    
,

【讨论】：

澄清一下：记住watch和immediate: true在hook:created之前触发?

immediate 仅表示 watcher 在组件创建期间运行。它与是否会被不改变道具的事件触发无关，这是OP所要求的