利用computed配合watch监听子组件中值得变化并作出相应操作

最新推荐文章于 2023-07-19 23:59:06 发布

文i

最新推荐文章于 2023-07-19 23:59:06 发布

阅读量875

点赞数 1

文章标签： javascript css vue.js html html5

本文链接：https://blog.csdn.net/weixin_44955769/article/details/114374283

版权

现在一需求，子组件的子组件中的值发生变化，要求根父组件时时监听得到，这是我的方法（老子不想用状态管理）

父组件的子组件的子组件

  data () {
    return {
      show: false,
      time: '5min',
      unit: 'k'
    }
  },

父组件的子组件

	
  <transaction-settings ref="transactionSettings"/> // 这是调用的上面

  computed: {
    time: function () {
      return this.transactionSettings.time
    },
    unit: function () {
      return this.transactionSettings.unit
    }
  },

根父组件

	
  <TimeSetting ref="TimeSetting" /> // 这是调用的上面

  computed: { // 拿到状态
    time: function () {
      return this.timeSetting.time
    },
    unit: function () {
      return this.timeSetting.unit
    }
  },
  watch: { // 监听状态
    'timeSetting.time': function (val) {
        this.selectOptions(this.activeValue) // 监听改变后的相应操作
    },
    'timeSetting.unit': function (val) {
        this.selectOptions(this.activeValue) // 监听改变后的相应操作
    }
  },