vue点击的时候每次点击通过$emit向父组件传值,父组件不能实时获取到新的值

Question

我使用的element ui ,用的table组件，在每一行点击的时候，将当前选中的id通过$emit向父组件传值，父组件只有在第一次能获取到，之后再次点击父组件不能实时获取到。

子组件：Invoice.vue

rowClick(row) {
  this.$emit('invoice', this.invoice_id)
}

父组件：

<invoice
        :adv-user-id.sync="advUserId"
        :campaign-id="campaignId"
        @invoice="getInvoiceId"
></invoice>

getInvoiceId(id) {
      this.invoice_id = id
      console.log(id) //这里不能实时打印出来改变的值，watch同样监听不到this.invoice_id改变
    }

Answer 1

你使用的是异步传输，watch监听是只有新值的时候才会监听到，https://www.jianshu.com/p/6b0...

Answer 2

不清楚 你是怎么写的 但是 我特地 创建了个项目 试了下 没问题的。获取你可以看下 是不是每次都触发了 rowClick这个事件

Answer 3

已经可以收到数据了 ，子组件向父组件传值是没问题的，我突然发现我的问题出现在我子组件传向的是父组件的子组件的slot中，问题见这个：https://segmentfault.com/q/10...

Answer 4

子组件传值后局部刷新父组件
父组件:

    <invoice 
    :adv-user-id.sync="advUserId"
    :campaign-id="campaignId"
    @invoice="getInvoiceId"
    @refresh="refresh"
    v-if="hackReset">
    </invoice>
    //data注册
    data(){
        return(){
         hackReset = true;
            }
        },
//methods方法调用
methods:
{
     reload() {
      this.hackReset = false;
      this.$nextTick(() => {
        this.hackReset = true;
      });
    },
    refresh(){
        this.reload();
    }
    
}

子组件:

//调用父组件函数和传递值
   rowClick(row) {
      this.$emit('invoice', this.invoice_id)
      this.$emit('refresh')
    }

Answer 5

rowClick(row) {
console.log(row)
  this.$emit('invoice', this.invoice_id)
}

看下是否触发正常