全国服务热线:4008-888-888

行业新闻

小程序有哪些用处_浅谈Vue.js中ref ($refs)用法举例

浅谈Vue.js中ref ($refs)用法举例总结       本篇文章主要介绍了浅谈Vue.js中ref ($refs)用法举例总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

HTML 部分

 div id="ponent" v-on:click="consoleRef" 
 component-father ref="outsideComponentRef" 
 /component-father 
 p ref在外面的组件上 /p 
 /div 

js部分

 ponentTem={
 template:" div h5 我是子组件 /h5 /div "
 ponent=new Vue({
 el:"#ponent",
 components:{
 "component-father":ponentTem
 methods:{
 consoleRef:function () {
 console.log(this); // #ponent vue实例
 console.log(this.$refs.outsideComponentRef); // div.childComp vue实例
 });

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

HTML部分

 !--ref在外面的元素上-- 
 div id="ref-outside-dom" v-on:click="consoleRef" 
 component-father 
 /component-father 
 p ref="outsideDomRef" ref在外面的元素上 /p 
 /div 

JS部分

 var refoutsidedomTem={
 template:" div h5 我是子组件 /h5 /div "
 var refoutsidedom=new Vue({
 el:"#ref-outside-dom",
 components:{
 "component-father":refoutsidedomTem
 methods:{
 consoleRef:function () {
 console.log(this); // #ref-outside-dom vue实例
 console.log(this.$refs.outsideDomRef); // p ref在外面的元素上 /p 
 });

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

HTML部分

 !--ref在里面的元素上-- 
 div id="ref-inside-dom" 
 component-father 
 /component-father 
 p ref在里面的元素上 /p 
 /div 

JS部分

 var refinsidedomTem={
 template:" div v-on:click='consoleRef' " +
 " h5 ref='insideDomRef' 我是子组件 /h5 " +
 " /div ",
 methods:{
 consoleRef:function () {
 console.log(this); // div.childComp vue实例 
 console.log(this.$refs.insideDomRef); // h5 我是子组件 /h5 
 var refinsidedom=new Vue({
 el:"#ref-inside-dom",
 components:{
 "component-father":refinsidedomTem
 });

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

HTML部分

 !--ref在里面的元素上--全局注册-- 
 div id="ref-inside-dom-all" 
 ref-inside-dom-quanjv /ref-inside-dom-quanjv 
 /div 

JS部分

 ponent("ref-inside-dom-quanjv",{
 template:" div " +
 " input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef' " +
 " p ref在里面的元素上--全局注册 /p " +
 " /div ",
 methods:{
 showinsideDomRef:function () {
 console.log(this); //这里的this其实还是div.insideFather
 console.log(this.$refs.insideDomRefAll); // input type="text" 
 var refinsidedomall=new Vue({
 el:"#ref-inside-dom-all"

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




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服