Vue与ref属性与refs转载

原创

小哥 3年前 (2022-10-27) 阅读数 152 #Vue

文章标签 vue vue教程

ref 被用来给DOM元素或子组件注册参考信息。参考信息基于父零部件的 $refs 该对象已注册。如果在普通情况下DOM在元素上使用时，引用信息是元素; 如果在子零部件上使用，参照信息就是零部件实例。

注：只要你愿意Vue直接运行在DOM元素，则必须使用ref待登记的财产

实例：

请按顺序来。create报价时DOM元素，先入DOM中使用ref该标签已注册，然后可以传递this.$refs‘然后在注册时引用该名称。DOM元素了

第二部分

vue中的 ref 和 $refs

如图， ref 用于注册元素或子组件的参考信息。参照信息将注册到父零部件。 $refs 在物体上。如果在普通情况下 DOM 元素，则引用指向 DOM 元素；如果在子组件上使用，则引用指向组件实例：

在上面的示例中，input参考信息input1 ，$refs 都注册了吗？ref在一组中，

console.log(this.$refs.input1)//
console.log(document.getElementById(input1))//

这两种方法都获得了Dom节点，而$refs相对document.getElementById方法，将减少收购。dom节点消耗。

ref和v-for一起办案

li里的ref无法读取的item里面的价值，即E。item.name或直接作为字符串读取。“item.name”，

此时的$refs

第三部分：

一、ref在外部组件上使用

HTML 部分

ref在外部的组件上

js部分

var refoutsidecomponentTem={
template:"
我是一个子组件
"
};
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在外部元素上使用。

HTML部分


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

JS部分

var refoutsidedomTem={
template:"
我是一个子组件
"
};
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); //
ref关于外面的元素
}
}
});

三、ref在内部的元素上使用---部分注册组件

HTML部分


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

JS部分

var refinsidedomTem={
template:"
" +
"
我是一个子组件
" +
"

",

methods:{

consoleRef:function () {

console.log(this); // div.childComp vue实例

console.log(this.$refs.insideDomRef); //

`我是一个子组件`

}

};

var refinsidedom=new Vue({

el:"#ref-inside-dom",

components:{

"component-father":refinsidedomTem

}

});

四、ref在内部的元素上使用---全球注册组件

HTML部分


<div id="ref-inside-dom-all">
<ref-inside-dom-quanjv></ref-inside-dom-quanjv>
</div>

JS部分

Vue.component("ref-inside-dom-quanjv",{
template:"
" +
"" +
"
ref关于里面的元素--全局注册
" +
"

",

methods:{

showinsideDomRef:function () {

console.log(this); //这里的this其实还是div.insideFather

console.log(this.$refs.insideDomRefAll); //

}

});

var refinsidedomall=new Vue({

el:"#ref-inside-dom-all"

});

版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除

Vue与ref属性与refs转载

ref 被用来给DOM元素或子组件注册参考信息。参考信息基于父零部件的 $refs 该对象已注册。如果在普通情况下DOM在元素上使用时，引用信息是元素; 如果在子零部件上使用，参照信息就是零部件实例。

注：只要你愿意Vue直接运行在DOM元素，则必须使用ref待登记的财产

实例：

vue中的 ref 和 $refs

我是一个子组件

我是一个子组件

我是一个子组件

我是一个子组件

版权声明

作者文章

`我是一个子组件`

`我是一个子组件`

`我是一个子组件`

`我是一个子组件`