即使 prop 没有改变,如何观看呢?

Rob*_*and 1 javascript vue.js nuxt.js

我有一个与道具同名的观察者。该 prop 在某些事件的父组件中动态设置。我需要每次在父组件上触发事件时触发子组件中具有属性值的某些函数 - 即使它设置的 prop 是相同的。是否有任何观察者选项或其他处理此类情况的方法可以让我做到这一点?

我尝试过的(这是在Post组件中):

watch: {
    replyClicked:
    {
        handler(newVal, oldVal)
        {
            console.log(newVal, oldVal);
        },
        immediate:true
    }
},
Run Code Online (Sandbox Code Playgroud)

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

<RenderPost @onReply="onReply" />
<Post :replyClicked="replyClicked" />
Run Code Online (Sandbox Code Playgroud)

这些是父数据和方法:

data()
{
    return {
        replyClicked : null
    }
},
methods :
{
    onReply(id)
    {
        this.replyClicked = id;
    }
}
Run Code Online (Sandbox Code Playgroud)

Bou*_*him 5

您可以使用immediate选项:

watch:{
  yourProp:{
   handler(newval,oldVal){

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

 }

}

Run Code Online (Sandbox Code Playgroud)

编辑

由于旧值与新值相同,您可以尝试此解决方法,通过添加始终更改的字段将 prop 定义为对象:

data()
{
    return {
        replyClicked : {
          changeCount:0,
          id:null
         }
    }
},
methods :
{
    onReply(id)
    {
        this.replyClicked ={id, changeCount:this.replyClicked.changeCount+1}
    }
}
Run Code Online (Sandbox Code Playgroud)

子组件:

watch: {
    replyClicked:
    {
        handler(newVal, oldVal)
        {
            console.log(newVal, oldVal);
        },
        immediate:true,
        deep:true
    }
},
Run Code Online (Sandbox Code Playgroud)