Vue中通过watch来响应数据的变化

原创
2020/01/15 17:56
阅读数 1.2K

Vue中的代码

原本是这样的

<div class="right-tip" >{{info.roomTypeCode}}</div>

但是由于是父组件赋值传给子组件。导致首次次运行页面都需要刷新才能进行数据动态渲染。

于是就有了下面的改造的代码用到了ref

ref 有三种用法:

  1、ref 加在普通的元素上,用this.ref.name 获取到的是dom元素

  2、ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法

  3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

具体可以看下这篇博客

https://www.cnblogs.com/goloving/p/9404099.html

<div class="right-tip" ref="roomTypeCode"></div>

使用watch来响应数据的变化

watch: {
    info: {
        handler(newVal, oldVal) {
            this.$refs.roomTypeCode.innerHTML = newVal.roomTypeCode ? newVal.roomTypeCode : '';
        },
        deep: true,
        immediate: true
    }
}

info是属性

export default {
  name: 'FillInfo',
  props: ['info'],
  components: {
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Field.name]: Field,
    [Stepper.name]: Stepper,
    PhoneInput
  },
  data () {
    return {
      center: true
    }
  },
  methods: {
    plus () {
      this.$emit('plus')
    },
    change (val) {
      this.$emit('change', val)
    },
    minus () {
      this.$emit('minus')
    }
  },
    watch: {
        info: {
            handler(newVal, oldVal) {
                this.$refs.roomTypeCode.innerHTML = newVal.roomTypeCode ? newVal.roomTypeCode : '';
            },
            deep: true,
            immediate: true
        }
    }
}

immediate和handler

这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。

监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法;

immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler

deep

当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。

this.$refs.roomTypeCode.innerHTML是要赋值

this.$refs的赋值可以查看这篇博客

https://www.cnblogs.com/frost-yen/p/11145791.html

this.$refs.roomTypeCode.innerHTML = newVal.roomTypeCode ? newVal.roomTypeCode : '';

判断是否有值如果有的话则返回newVal.roomTypeCode新的值,没有的话就给个空。

经过这个方法,我去运行代码。一进去页面就直接渲染出动态数据了,不需要再去刷新页面

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部