vue mounted 第一次无法获取dom或$refs问题

vue 03-24 15:04

在Vue中的组件钩子函数mounted中,通过this.$refs和document.getElementById()无法获取组件或节点信息,

问题描述:因为页面的<iframe>是放到某个div下面的,div设置了v-show=false, 然后点击input事件设置为v-show属性为true后,再获取this.$refs无效。

解决方法:目前的解决方法是使用 setTimeout 来延迟获取,哈哈

setTimeout(() => {
  let backUrl = process.env.VUE_APP_MANAGE_URL + '/device/listswitch'
  window.document.getElementById('authShopIframe').contentWindow.postMessage("传递的值","*")
}, 500);

setTimeout(function(){
   this.$refs.authShopIframe.contentWindow.postMessage("传递的值","*")
},500)

根据其它网友们遇到的问题和解决方法,总结在mounted中使用this.refs

1、引用ref="XX"的组件不能采用懒加载的形式引入

2、this.refs只能获取在该组件的标签和组件(不能使用v-for、v-if、v-show等vue指令),不能获取组件内部的标签(即要填充插槽里的标签)

 

相关推荐