this.$refs
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
在vue中ref可以以属性的形式添加给标签或者组件
* 给标签使用 [#t7670a4f]
ref 写在标签上时：this.$refs.ipt 获取的是添加了ref="ipt"...
#codeprettify{{
<template>
<input type="text" ref="ipt"/>
</template>
}}
#codeprettify{{
methods:{
confirm(){
console.log(this.$refs.ipt.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>我是子组件</...
};
var refoutsidecomponent=new Vue({
el:"#ref-outside-component",
components:{
"component-father":refoutsidecomponentTem
},
methods:{
consoleRef:function () {
console.log(this); // #ref-outside-compon...
console.log(this.$refs.outsideComponentRe...
}
}
});
}}
* 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>我是子组件</...
};
var refoutsidedom=new Vue({
el:"#ref-outside-dom",
components:{
"component-father":refoutsidedomTem
},
methods:{
consoleRef:function () {
console.log(this); // #ref-outside-dom ...
console.log(this.$refs.outsideDomRef); /...
}
}
});
}}
* 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='cons...
"<h5 ref='insideDomRef'>我是子组件...
"</div>",
methods:{
consoleRef:function () {
console.log(this); // div.childComp vu...
console.log(this.$refs.insideDomRef); //...
}
}
};
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='insideDomRef...
" <p>ref在里面的元素上--全局注册 </p...
"</div>",
methods:{
showinsideDomRef:function () {
console.log(this); //这里的this其实还是di...
console.log(this.$refs.insideDomRefAll); ...
}
}
});
var refinsidedomall=new Vue({
el:"#ref-inside-dom-all"
});
}}
* 给组件使用 [#gd800c77]
ref 写在组件上时：this.$refs['component'] 获取到的是添加...
#codeprettify{{
<template>
<comp-detail ref="component"></list-detail>
</template>
}}
#codeprettify{{
methods:{
confirm(){
this.$refs['component'].init() //调用组件comp...
}
}
}}
* 注意 [#s72a94af]
ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲...
如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组...
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
在vue中ref可以以属性的形式添加给标签或者组件
* 给标签使用 [#t7670a4f]
ref 写在标签上时：this.$refs.ipt 获取的是添加了ref="ipt"...
#codeprettify{{
<template>
<input type="text" ref="ipt"/>
</template>
}}
#codeprettify{{
methods:{
confirm(){
console.log(this.$refs.ipt.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>我是子组件</...
};
var refoutsidecomponent=new Vue({
el:"#ref-outside-component",
components:{
"component-father":refoutsidecomponentTem
},
methods:{
consoleRef:function () {
console.log(this); // #ref-outside-compon...
console.log(this.$refs.outsideComponentRe...
}
}
});
}}
* 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>我是子组件</...
};
var refoutsidedom=new Vue({
el:"#ref-outside-dom",
components:{
"component-father":refoutsidedomTem
},
methods:{
consoleRef:function () {
console.log(this); // #ref-outside-dom ...
console.log(this.$refs.outsideDomRef); /...
}
}
});
}}
* 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='cons...
"<h5 ref='insideDomRef'>我是子组件...
"</div>",
methods:{
consoleRef:function () {
console.log(this); // div.childComp vu...
console.log(this.$refs.insideDomRef); //...
}
}
};
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='insideDomRef...
" <p>ref在里面的元素上--全局注册 </p...
"</div>",
methods:{
showinsideDomRef:function () {
console.log(this); //这里的this其实还是di...
console.log(this.$refs.insideDomRefAll); ...
}
}
});
var refinsidedomall=new Vue({
el:"#ref-inside-dom-all"
});
}}
* 给组件使用 [#gd800c77]
ref 写在组件上时：this.$refs['component'] 获取到的是添加...
#codeprettify{{
<template>
<comp-detail ref="component"></list-detail>
</template>
}}
#codeprettify{{
methods:{
confirm(){
this.$refs['component'].init() //调用组件comp...
}
}
}}
* 注意 [#s72a94af]
ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲...
如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组...
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
