Vue父子组件属性和方法的调用

Question

父组件模板:
<template>

<div>
    <u-newtoast ref="cdnmonitor" :content="content"></u-newtoast>
</div>

</template>
在父组件中，请求成功后的操作是

 self.content = error.message; 
 self.$refs.cdnmonitor.show();

发现在执行子组件$refs.cdnmonitor.show方法的时候，子组件的content的属性依然是初始化的默认值，导致子组件显示的内容不对，在执行完show方法之后，子组件才会更新content的值，这个机制是vue自带的机制吗，有什么可以解决的方案吗？

Answer 1

$refs.cdnmonitor 就是一个元素的dom对象, vue没有在元素上添加任何方法(我印象中应该是这样)。
你是不是用了其他ui框架，比如饿了么的那个。

ps: 可否把你的代码多粘贴一点, 上下文都没有怎么排查呢。。。

Answer 2

父子组件传递值并产生变化的时候, 尽量使用this.$nextTick(() => {}), 参考: 异步更新队列

所以在操作中你可以试试(基于es6, 如果没有配置babel就更换一下吧):

self.content = error.message;
self.$nextTick(() => {
  self.$refs.cdnmonitor.show();
})