這篇文章主要介紹了淺談Vue.js中ref ($refs)用法舉例總結，現在分享給大家，也給大家做個參考。
本文介紹了Vue.js中ref ($refs)用法舉例總結，分享給大家，具體如下：
看Vue.js文件中的ref部分，自己總結了下ref的使用方法以便後面查閱。
一、ref使用在外面的元件上
HTML 部分
<p id="ref-outside-component" v-on:click="consoleRef"> <component-father ref="outsideComponentRef"> </component-father> <p>ref在外面的组件上</p> </p>
js部分
var refoutsidecomponentTem={
template:"<p class='childComp'><h5>我是子组件</h5></p>"
};
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); // p.childComp vue实例
}
}
});二、 ref使用在外面的元素上
HTML部分
<!--ref在外面的元素上--> <p id="ref-outside-dom" v-on:click="consoleRef" > <component-father> </component-father> <p ref="outsideDomRef">ref在外面的元素上</p> </p>
JS部分
var refoutsidedomTem={
template:"<p class='childComp'><h5>我是子组件</h5></p>"
};
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在里面的元素上--> <p id="ref-inside-dom"> <component-father> </component-father> <p>ref在里面的元素上</p> </p>
JS部分
var refinsidedomTem={
template:"<p class='childComp' v-on:click='consoleRef'>" +
"<h5 ref='insideDomRef'>我是子组件</h5>" +
"</p>",
methods:{
consoleRef:function () {
console.log(this); // p.childComp vue实例
console.log(this.$refs.insideDomRef); // <h5 >我是子组件</h5>
}
}
};
var refinsidedom=new Vue({
el:"#ref-inside-dom",
components:{
"component-father":refinsidedomTem
}
});四、ref使用在裡面的元素上---全域註冊元件
HTML部分
<!--ref在里面的元素上--全局注册--> <p id="ref-inside-dom-all"> <ref-inside-dom-quanjv></ref-inside-dom-quanjv> </p>
JS部分
Vue.component("ref-inside-dom-quanjv",{
template:"<p class='insideFather'> " +
"<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +
" <p>ref在里面的元素上--全局注册 </p> " +
"</p>",
methods:{
showinsideDomRef:function () {
console.log(this); //这里的this其实还是p.insideFather
console.log(this.$refs.insideDomRefAll); // <input type="text">
}
}
});
var refinsidedomall=new Vue({
el:"#ref-inside-dom-all"
});上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
以上是詳細介紹Vue.js中ref ($refs)用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
