vue this.refs,vue3.0 refs
这篇文章主要介绍了某视频剪辑软件实例中使用$参考文献的注意事项，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在开发过程中，经常会通过实例的虚拟机.$refs(这个。$参考文献)取得通过裁判员注册过的组件，并进行相应操作，但存在取不到元素的情况，其根本原因是因为$参考文献只能取得已安装（渲染)之后的元素。
例如，在这种情况中，若旗从真值切换到假值取不到节点是正常的，因为控制显示如果为假值，那么该节点不会被渲染。
但如果从假值切换到真值时，也可能取不到节点，这是因为渲染需要时间，通常可以使用$nextTick()解决。
.
el-table v-if=flag ref=table
埃尔表列属性=prop1/el表列
埃尔-表列属性= 2号道具/El-表列
/el-table
.
导出默认值{
方法：{
这个. refs.table.XXX()
}
}
但存在一个极特殊的情况，第一次页面渲染的时候，$参考文献也取不到值。这个时候就要考虑虚拟展示进行组件元素的隐藏与展示。
因为虚拟展示是通过钢性铸铁的显示：无进行隐藏控制，所以一开始就会渲染，肯定能够取到元素
补充：Vue.js中ref ($refs)用法举例总结及应注意的坑
一、根据官方文档总结的用法：
看vue。j文档中的裁判员部分，自己总结了下裁判员的使用方法以便后面查阅。
1、参考使用在外面的组件上
超文本标记语言部分
div id= ref-outside-component v-on:click=控制台ref
组件-父ref=outsideComponentRef
/组件-父亲
字首在外面的组件上/p
/div
射流研究…部分
var refoutsidecomponentTem={
模板： div class=childComph5我是子组件/h5/div
};
var refoutsidecomponent=new Vue({
El:"# ref-outside-component "，
组件：{
“组件-父亲”:refoutsidecontem
},
方法：{
consoleRef:function () {
控制台。日志(这个)；//# ref-外部组件某视频剪辑软件实例
console.log(这个参考文献。outsidecomponentref)；//div.childComp vue实例
}
}
});
2、参考使用在外面的元素上
超文本标记语言部分
！- ref在外面的元素上-
div id= ref-outside-DOM v-on:click= console ref
组件-父亲
/组件-父亲
p ref=outsideDomRefref在外面的元素上/p
/div
射流研究…部分
var refoutsidedomTem={
模板： div class=childComph5我是子组件/h5/div
};
var refoutsidedom=new Vue({
El:"# ref-outside-DOM "，
组件：{
component-father :refoutsidedomitem
},
方法：{
consoleRef:function () {
控制台。日志(这个)；//#ref-outside-dom vue实例
console.log(这个参考文献。outsidedomref)；//p ref在外面的元素上/p
}
}
});
3、参考使用在里面的元素上-局部注册组件
超文本标记语言部分
！- ref在里面的元素上-
div id=ref-inside-dom
组件-父亲
/组件-父亲
字首在里面的元素上/p
/div
射流研究…部分
var refinsidedomTem={
模板： div class= child comp v-on:click= console ref
h5 ref=insideDomRef 我是子组件/h5
/div ，
方法：{
consoleRef:function () {
控制台。日志(这个)；//div.childComp vue实例
console.log(这个参考文献。insidedomref)；//h5我是子组件/h5
}
}
};
var refinsidedom=new Vue({
El:"# ref-inside-DOM "，
组件：{
“component-father”:refin sidedom项
}
});
4、参考使用在里面的元素上-全局注册组件
超文本标记语言部分
！- ref在里面的元素上-全局注册-
div id=ref-inside-dom-all
ref-inside-DOM-quanjv/ref-inside-DOM-quanjv
/div
射流研究…部分
vue。组件( ref-inside-DOM-quan JV ，{
模板：" div class=insideFather "
input type= text ref= insideDomRefAll v-on:input= showinsideDomRef
字首在里面的元素上-全局注册/p
/div ，
方法：{
showinsideDomRef:function () {
控制台。日志(这个)；//这里的这其实还是内部过滤器
console.log(这个。$ refs . insidedomrefall)；//输入类型=text
}
}
});
var refinsidedomall=new Vue({
el:#ref-inside-dom-all
});
二、应注意的坑
1.如果要通过v-添加不同的refs进行遍历，记得加：sign，即：ref=a变量；
这和其他属性是一样的。如果是定值，不需要加：sign。如果是变量，记得加：sign。
2.通过：ref=变量添加一个ref(即add: sign)。如果想得到这个ref，需要加上[0]，比如这个。$ refs[refsarrayitem][0]；如果不是ref=一个变量而是ref=一个字符串的方式，就不需要添加了，比如这个。$refs[refsArrayItem]
添加和不添加[0]的区别-未展开
加与不加的区别[0]-展开。
3.当你想在元素ui对话框打开后获取dom时，应该使用$nextTick，而不是直接使用这个。$参考文献。imgLocal2:
Console.log(在此之外。$refs.imgLocal2 ，这个。$ refs . imglocal 2)；
setTimeout(()={
console.log(this。$refs.imgLocal2 setTimeout ，这。$ refs . imglocal 2)；
}, 500);//不推荐
这个。$nextTick(()={
console.log(this。$refs.imgLocal2 $nextTick ，这个。$ refs . imglocal 2)；
});
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。如有错误或不足之处，请不吝赐教。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。