Vue的ref引用属性

有时候我们也要获取dom元素的需求,我们可以用vue的ref引用属性;

例:<div ref="hello" @click="fun">hello</div>

methods:{

         fun:function(){

                    console.log(this.$refs.hello);        //这里返回的的这个div的元素标签节点,

                     console.log(this.$refs.hello.innerHTML); //这里返回的的这个div的元素标签节点里面的内容,

        }

}

如果ref属性定义在一个组件上,那么它返回的是这个组件的实例引用,这样可以获取到组件里面定义的数据,甚至其他的

方法、

<rol ref="one">hell</rol>

console.log(this.$refs.one.$el);     //获取到子组件的模板标签元素

console.log(this.$refs.one);     返回的是这个组件的实例引用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容