好资源导航 » 文章资讯 » 浅谈Vue.js中ref ($refs)用法举例总结

浅谈Vue.js中ref ($refs)用法举例总结

2023-09-19 05:17:06 159

本文介绍了Vue.js中ref($refs)用法举例总结，分享给大家，具体如下：

看Vue.js文档中的ref部分，自己总结了下ref的使用方法以便后面查阅。

一、ref使用在外面的组件上

HTML部分




ref在外面的组件上

js部分

varrefoutsidecomponentTem={
template:"我是子组件

" }; varrefoutsidecomponent=newVue({ el:"#ref-outside-component", components:{ "component-father":refoutsidecomponentTem }, methods:{ consoleRef:function(){ console.log(this);//#ref-outside-componentvue实例 console.log(this.$refs.outsideComponentRef);//div.childCompvue实例 } } });

二、ref使用在外面的元素上

HTML部分





ref在外面的元素上

JS部分

varrefoutsidedomTem={
template:"我是子组件

" }; varrefoutsidedom=newVue({ el:"#ref-outside-dom", components:{ "component-father":refoutsidedomTem }, methods:{ consoleRef:function(){ console.log(this);//#ref-outside-domvue实例 console.log(this.$refs.outsideDomRef);//

ref在外面的元素上

} } });

三、ref使用在里面的元素上---局部注册组件

HTML部分





ref在里面的元素上

JS部分

varrefinsidedomTem={
template:""+
"我是子组件"+
"",
methods:{
consoleRef:function(){
console.log(this);//div.childCompvue实例
console.log(this.$refs.insideDomRef);//我是子组件
}
}
};
varrefinsidedom=newVue({
el:"#ref-inside-dom",
components:{
"component-father":refinsidedomTem
}
});

四、ref使用在里面的元素上---全局注册组件

HTML部分

JS部分

Vue.component("ref-inside-dom-quanjv",{
template:""+
""+
"ref在里面的元素上--全局注册"+
"",
methods:{
showinsideDomRef:function(){
console.log(this);//这里的this其实还是div.insideFather
console.log(this.$refs.insideDomRefAll);//
}
}
});

varrefinsidedomall=newVue({
el:"#ref-inside-dom-all"
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

浅谈Vue.js中ref ($refs)用法举例总结

我是子组件

我是子组件

我是子组件

热门推荐

随机推荐