vue2里面ref的具体使用方法
更新时间：2017年10月27日 09:30:41 作者：conquer_冷忆
本篇文章主要介绍了vue2里面ref的具体使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文介绍了vue2里面ref的具体使用方法，分享给大家，具体如下。
1、我们先定义两个组件
html部分
<div id="app"> <navbar ></navbar> <pagefooter ></pagefooter> </div>
js部分
Vue.component('navbar',{
template:'<div>{{navs}}</div>',
data:function () {
return {
navs:1
}
}
});
Vue.component('pagefooter',{
template:'<div>{{footer}}</div>',
data:function () {
return {
footer:11
}
}
});
这里怎么直接访问navbar的navs和pagefooter的footer值呢？这就用到ref了
2、ref的使用
修改组件
<div id="app">
<navbar ref="navbar"></navbar>
<pagefooter ref="pagefooter"></pagefooter>
</div>
new Vue({
el:'#app',
created:function(){
},
mounted:function () {
this.$refs.navbar.navs=222
//ready,
//这里怎么直接访问navbar的navs和pagefooter的footer值呢，
console.log(this.$refs.navbar.navs);
console.log(this.$refs.pagefooter.footer);
}
})
如果仅仅用到一个普通标签上
<div ref="demo"></div>
他的作用和：
document.querySelector('[ref=demo]');
的作用一样
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue实现画笔回放，canvas转视频播放功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了在Vue3组合式API中如何优化列表渲染性能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-12-12
这篇文章主要为大家详细介绍了Vue+Bootstrap收藏（点赞）功能逻辑与具体实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了vue中的slot封装组件弹窗，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章给大家分享了Vue实例以及生命周期的相关知识点内容，有兴趣的朋友们可以学习下。2018-08-08
本篇文章主要介绍了详解Vue生命周期的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要为大家详细介绍了vue自定义开关组件的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
这篇文章主要介绍了vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流),本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要介绍了vue打包(hash和history)部署详细步骤,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
在Vue项目中,大图片和多数据Excel等大文件的上传是一个非常常见的需求，本文主要介绍了vue+ts大文件切片上传，具有一定的参考价值，感兴趣的可以了解一下2024-01-01
最新评论