Vue中用watch 监听父子组件传递对象属性变化

最新推荐文章于 2024-07-29 14:33:52 发布

老酒馆的喵

最新推荐文章于 2024-07-29 14:33:52 发布

阅读量3.8k

点赞数 1

分类专栏： VUE 前端文章标签： vue

本文链接：https://blog.csdn.net/yx_xuan/article/details/109328649

版权

本文介绍了在Vue中如何使用watch监听父子组件之间传递的对象属性变化。通过普通watch或结合computed计算属性，可以实现当对象的特定属性改变时触发相应处理。

摘要由CSDN通过智能技术生成

1、普通的watch用来监听一个变量数据的变化

  props: ['mess'], // 从父组件接收
  data () {
    return {
      msg: ''  // 页面使用
    }
  },
  created: function () {
    this.msg = this.mess
  },
  watch: {
    mess (newValue, oldValue) {
      this.msg = newValue
    }
  }

2、监听对象属性，两种方法选其一即可

export default {
  name: 'child1',
  /* getData为对象 父组件传递
  <Child :get-data="data" :mess="msg"></Child>
  data: {
        'data1': '',
        'data2': 'hhhhhhhhhhhhh'
      } */
  props: ['getData', 'mess'], 
  data () {
    return {
      input1: {
        'data3': '',
        'data2': ''
      },  // input1供子组件使用
      msg: ''
    }
  },
  created: function () {
    this.input1 = {
      'data3': this.getData.data1,
      'data2': this.getData.data