vue2里面ref的具体使用方法

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

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

1、我们先定义两个组件

html部分

js部分

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

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

2、ref的使用

修改组件

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

})

如果仅仅用到一个普通标签

他的作用和:

的作用一样

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

猜你在找的Vue相关文章