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
}
}
}
这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。
监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法;
immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler
当需要监听一个对象的改变时,普通的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新的值,没有的话就给个空。
经过这个方法,我去运行代码。一进去页面就直接渲染出动态数据了,不需要再去刷新页面