vue2里面ref的具体使用方法

前端之家收集整理的这篇文章主要介绍了vue2里面ref的具体使用方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了vue2里面ref的具体使用方法分享给大家,具体如下。@H_502_1@

1、我们先定义两个组件

@H_502_1@

html部分 @H_502_1@

js部分 @H_502_1@

{{navs}}
',data:function () { return { navs:1 } } }); Vue.component('pagefooter',{ template:'
{{footer}}
',data:function () { return { footer:11 } } });

这里怎么直接访问navbar的navs和pagefooter的footer值呢?这就用到ref了 @H_502_1@

2、ref的使用

@H_502_1@

修改组件@H_502_1@

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);
}

})

如果仅仅用到一个普通标签上@H_502_1@

他的作用和:@H_502_1@

的作用一样@H_502_1@

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。@H_502_1@

猜你在找的Vue相关文章