子组件时时更新父组件传来的值

2021-11-30 19:58:35 阅读：157 来源： 互联网

标签：isReady 传来 watch 监听命令式时时组件 newValue

父子组件传值时，父组件从接口获取数据，通过props传递给子组件。实际情况下：父组件获取数据有时间延迟，传递的props值为空，子组件接收的数据为props默认值

渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程

父beforeUpdate->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

在子组件第一次获取不到父组件传过来的值时那么建议使用watch监听器进行监听，但是往往这种情况发生在给子组件赋值的时候即只需页面加载时执行一次。这时候

就是说，vue 的 watch 除了可以使用声明式的配置项以外，还可以通过命令式 vm.$watch 方法。

如下是我们常用的声明式：

export default{
  data: {
    isReady: false
  },
  watch: {
    isReady(newValue, oldValue) {
      console.log(newValue)
    }
  }
}

如下是我们比较少用的命令式：

命令式好处是，可以得到一个取消监听的函数，在需要时取消监听，比如你想要只监听一次，可以像下面使用：

export default {
  data: {
    isReady: false
  },
  mounted() {
    const unwatch = this.$watch('isReady', function(newValue, oldValue){
      console.log(newValue);
      unwatch()
    });
  },
}

命令式在ts和js中都能使用

标签：isReady,传来,watch,监听,命令式,时时,组件,newValue
来源： https://blog.csdn.net/weixin_42478537/article/details/121640903

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

子组件时时更新父组件传来的值