- $ref用来获取组件实例,不通过父子通信,可以获取组件的所有方法及data的变量
- $ref需要在dom挂载后才能获取到,否则undefined
获取原生dom节点
<div id="box">
<h2>ref- 获取原生dom节点</h2>
<input type="text" ref="myinput"/>
<div ref="mydiv">111111111111111111111111</div>
<button @click="handleGet()">获取</button>
</div>
new Vue({
el:"#box",
methods:{
handleGet(){
console.log(this.$refs.myinput.value)
console.log(this.$refs.mydiv)
}
}
})
获取组件实例
<div id="box">
<h2>ref-登录页-获取组件实例,不通过父子通信,直接拿状态和赋值状态</h2>
<vant-field mylabel="用户名" mytype="text" @mychange="handleChange"></vant-field>
<vant-field mylabel="密码" mytype="password" ref="mypassword"></vant-field>
<vant-field mylabel="年龄" mytype="number" ref="myage"></vant-field>
<button @click="handleLogin">登录</button>
<button>重置</button>
</div>
Vue.component("vant-field",{
props:["mylabel","mytype"],
data(){
return {
mytext:""
}
},
template:`
<div>
<label>{{mylabel}}</label>:
<input :type="mytype" v-model="mytext" @input="handleInput"/>
</div>
`,
methods:{
handleInput(){
this.$emit("mychange",this.mytext)
}
}
})
new Vue({
el:"#box",
data:{
myusername:""
},
methods:{
handleChange(data){
this.myusername = data;
},
handleLogin(){
console.log("表单的用户名",this.myusername)
console.log("表单的密码",this.$refs.mypassword.mytext)
console.log("表单的年龄",this.$refs.myage.mytext)
this.$refs.myage.mytext = 2000
}
}
})