AI专业者开发社区 1 号成员
  •  0 回帖  •  5 浏览  •  4 个月前
   

vue里ref ($refs)用法

　　ref 有三种用法：

　　1、ref 加在普通的元素上，用 this.ref.name 获取到的是 dom 元素

　　2、ref 加在子组件上，用 this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

　　3、如何利用 v-for 和 ref 获取一组数组或者 dom 节点

　　注意：

　　1、ref 需要在 dom 渲染完成后才会有，在使用的时候确保 dom 已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

　　2、如果 ref 是循环出来的，有多个重名，那么 ref 的值会是一个数组 ，此时要拿到单个的 ref 只需要循环就可以了。

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

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

<span style="color: rgba(0, 0, 255, 1)">var</span> refoutsidecomponentTem=<span style="color: rgba(0, 0, 0, 1)">{
    template:</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">&lt;div class='childComp'&gt;&lt;h5&gt;我是子组件&lt;/h5&gt;&lt;/div&gt;</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
};
</span><span style="color: rgba(0, 0, 255, 1)">var</span> refoutsidecomponent=<span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Vue({
    el:</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">#ref-outside-component</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
    components:{
        </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">component-father</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">:refoutsidecomponentTem
    },
    methods:{
        consoleRef:function () {
            console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span>); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> #ref-outside-component     vue实例</span>
            console.log(<span style="color: rgba(0, 0, 255, 1)">this</span>.$refs.outsideComponentRef);  <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(255, 0, 0, 1)"><strong> div.childComp vue实例，组件实例</strong></span>



            }
}
});

二、ref 作用在外面元素上

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

<span style="color: rgba(0, 0, 255, 1)">var</span> refoutsidedomTem=<span style="color: rgba(0, 0, 0, 1)">{
    template:</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">&lt;div class='childComp'&gt;&lt;h5&gt;我是子组件&lt;/h5&gt;&lt;/div&gt;</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
};
</span><span style="color: rgba(0, 0, 255, 1)">var</span> refoutsidedom=<span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Vue({
    el:</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">#ref-outside-dom</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
    components:{
        </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">component-father</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">:refoutsidedomTem
    },
    methods:{
        consoleRef:function () {
            console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span>); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> #ref-outside-dom    vue实例</span>
            console.log(<span style="color: rgba(0, 0, 255, 1)">this</span>.$refs.outsideDomRef);  <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"><strong><span style="color: rgba(255, 0, 0, 1)">  &lt;p&gt;标签dom元素</span></strong> ref在外面的元素上&lt;/p&gt;</span>



            }
}
});

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

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

<span style="color: rgba(0, 0, 255, 1)">var</span> refinsidedomTem=<span style="color: rgba(0, 0, 0, 1)">{
    template:</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">&lt;div class='childComp' v-on:click='consoleRef'&gt;</span><span style="color: rgba(128, 0, 0, 1)">"</span> +
                   <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">&lt;h5 ref='insideDomRef'&gt;我是子组件&lt;/h5&gt;</span><span style="color: rgba(128, 0, 0, 1)">"</span> +
              <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">&lt;/div&gt;</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
    methods:{
        consoleRef:function () {
            console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span>);  <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> div.childComp   vue实例 </span>
            console.log(<span style="color: rgba(0, 0, 255, 1)">this</span>.$refs.insideDomRef);  <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> &lt;h5 &gt;我是子组件&lt;/h5&gt;</span>



            }
}
};
var refinsidedom=new Vue({
el:"#ref-inside-dom",
components:{
"component-father":refinsidedomTem
}
});

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

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

Vue.component(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">ref-inside-dom-quanjv</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,{
    template:</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">&lt;div class='insideFather'&gt; </span><span style="color: rgba(128, 0, 0, 1)">"</span> +
                <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">&lt;input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'&gt;</span><span style="color: rgba(128, 0, 0, 1)">"</span> +
                <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">  &lt;p&gt;ref在里面的元素上--全局注册 &lt;/p&gt; </span><span style="color: rgba(128, 0, 0, 1)">"</span> +
              <span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">&lt;/div&gt;</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">,
    methods:{
        showinsideDomRef:function () {
            console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span>); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(255, 0, 0, 1)"><strong>这里的this其实还是div.insideFather</strong></span>
            console.log(<span style="color: rgba(0, 0, 255, 1)">this</span>.$refs.insideDomRefAll); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> &lt;input  type="text"&gt;</span>



            }
}
});


</span><span style="color: rgba(0, 0, 255, 1)">var</span> refinsidedomall=<span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Vue({
    el:</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">#ref-inside-dom-all</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">
});</span></span></pre>