this.$refs の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue+this.$refs へ行く。
• +Vue+this.$refs の差分を削除

#author("2022-05-09T13:12:44+08:00","default:Admin","Admin")
#author("2022-05-12T09:48:02+08:00","default:Admin","Admin")
[[Vue]]

&color(red){※前提条件：本情報はVue 2.0を基づいて説明してる};
#contents

在vue中ref可以以属性的形式添加给标签或者组件

* 给标签使用 [#t7670a4f]

ref 写在标签上时：this.$refs.ipt 获取的是添加了ref="ipt"标签对应的dom元素

#codeprettify{{
<template>
   <input type="text" ref="ipt"/>
</template>
}}

#codeprettify{{
methods:{
    confirm(){
        console.log(this.$refs.ipt.value)  //打印出输入框中的value值
     }
}
}}

下面例子就是取得form的dom元素

#codeprettify{{
this.$refs.form.validate((valid) => {
   if (valid) {
     this.dialog = false;
   } else {
     return false;
   }
});
}}

* ref使用在外面的组件上 [#j2ce3115]

#codeprettify{{
<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作用在外面元素上 [#e16a775d]

#codeprettify{{
//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使用在里面的元素上–局部注册组件 [#pd814e63]

#codeprettify{{
//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使用在里面的元素上–全局注册组件 [#a1bc5d32]

#codeprettify{{
//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.insideFather
                console.log(this.$refs.insideDomRefAll); // <input  type="text">
            }
        }
    });

    var refinsidedomall=new Vue({
        el:"#ref-inside-dom-all"
    });
}}


* 给组件使用 [#gd800c77]

ref 写在组件上时：this.$refs['component'] 获取到的是添加了ref="component"属性的这个组件

#codeprettify{{
<template>
   <comp-detail ref="component"></list-detail>
</template>
}}

#codeprettify{{
methods:{
    confirm(){
        this.$refs['component'].init()     //调用组件comp-detail中的init()方法
     }
}
}}

* 注意 [#s72a94af]

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

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

#hr();
コメント：
#comment_kcaptcha