---

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

<div id="ref-outside-component" v-on:click="consoleRef"><component-father ref="outsideComponentRef"></component-father><p>ref在外面的組件上</p> </div>var refoutsidecomponentTem={template:"<div class='childComp'><h5>我是子組件</h5></div>"};var refoutsidecomponent=new Vue({el:"#ref-outside-component",components:{"component-father":refoutsidecomponentTem},methods:{consoleRef:function () {console.log(this); // #ref-outside-component vue實例console.log(this.$refs.outsideComponentRef); // div.childComp vue實例，組件實例}}});

二、ref作用在外面元素上

//ref在外面的元素上 <div id="ref-outside-dom" v-on:click="consoleRef" ><component-father></component-father><p ref="outsideDomRef">ref在外面的元素上</p> </div>var refoutsidedomTem={template:"<div class='childComp'><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>標簽dom元素 ref在外面的元素上</p>}}});

三、ref使用在里面的元素上–局部注冊組件

//ref在里面的元素上 <div id="ref-inside-dom"><component-father></component-father><p>ref在里面的元素上</p> </div>var refinsidedomTem={template:"<div class='childComp' 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使用在里面的元素上–全局注冊組件

//ref在里面的元素上--全局注冊 <div id="ref-inside-dom-all"><ref-inside-dom-quanjv></ref-inside-dom-quanjv> </div>Vue.component("ref-inside-dom-quanjv",{template:"<div class='insideFather'> " +"<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +" <p>ref在里面的元素上--全局注冊 </p> " +"</div>",methods:{showinsideDomRef:function () {console.log(this); //這里的this其實還是div.insideFatherconsole.log(this.$refs.insideDomRefAll); // <input type="text">}}});var refinsidedomall=new Vue({el:"#ref-inside-dom-all"});

總結

以上是生活随笔為你收集整理的vue里ref ($refs)用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。