【场景】：父组件多次通过props传入子组件的参数，由于参数没变化，而没有触发子组件在watch中的处理参数的方法，获取不到最新的数据（是指在方法中使用参数，不是在html中直接显示）。
【解决办法】：ref加在子组件上，用this.$refs.(ref值)获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.(ref值).方法()就可以使用了。
父组件
<template>
<div>
<button @click="showInfo(1)">修改传入子组件的参数</button>
<ImpotDialog :dialogInfo="dialogInfo" ref="whiteDialog"></ImpotDialog>
</div>
</template>
<script>
export default {
data(){
return {
dialogInfo: {
type: 0,
title: '',
info: {}
},
}
},
methods: {
// showInfo是父组件中修改（需要传递给子组件的）数据的时候调用的方法，在修改数据之后，会主动调用子组件的方法使用该数据
showInfo(type){
// 1. 先通过props传递给子组件的属性值
this.dialogInfo.type = type
this.dialogInfo.title = '批量新增白名单'
// 2. 再调用子组件的方法使用该属性
this.$refs.whiteDialog.initdialog(this.dialogInfo)
}
}
}
</script>
子组件
<script>
export default {
props: [
dialogInfo: {
type: Object,
default: () => { }
},
],
watch: {
dialogInfo: {
handler(val) {
this.initdialog(val);
},
deep: true,
}
},
methods: {
// initdialog是子组件中用到（从父组件传递到子组件）数据的方法
initdialog(val) {
this.dialogType = val.type
this.dialogTitle = val.title
},
}
}
</script>
