在日常开发中我们经常会用到ref,现在直接引用vue 官网对其简介
下面介绍几种ref常用案例:
1:获取dom元素
<div @click="test" ref="test">点我吧</div>
还可以获取input 中输入的值,不用v-model 双向绑定,
<view @click="getTest"> 点我吧 </view>
<view>
<input type="text" ref="inputs" style="background-color: #808080;">
</view>
methods: {
getTest() {
console.log(this.$refs.inputs.inputValue)
}
}
2:父组件可以拿到子组件data 中的值
子组件
<template>
<div style="color:cyan;">我是child组件,谁调用我谁就是我的父组件</div>
</template>
<script>
export default {
data(){
return{
msg:'我是child自子组件中的msg'
}
}
}
</script>
父组件(获取子组件data中的值)
<template>
<view>
<child ref="child"></child>
<view @click="getTest"> 点我吧 </view>
</view>
</template>
<script>
import child from '../compents/child.vue'
export default {
data() {
return {
}
},
components:{child},
methods: {
getTest() {
console.log(this.$refs.child.msg)
}
}
}
</script>
看上图我们可以在父组件中拿到子组件中的msg变量的值
3:父组件可以拿到子组件中的方法
子组件
<template>
<view style="color:cyan;">我是child组件,谁调用我谁就是我的父组件</view>
</template>
<script>
export default {
data(){
return{
msg:'我是child自子组件中的msg'
}
},
methods:{
getref(){
return '父组件调用到我了'
}
}
}
</script>
父组件(调用子组件中的test方法)
<template>
<view>
<child ref="child"></child>
<view @click="getTest"> 点我吧 </view>
</view>
</template>
<script>
import child from '../compents/child.vue'
export default {
data() {
return {}
},
components: {
child
},
methods: {
getTest() {
console.log(this.$refs.child.getref())
}
}
}
</script>
从上图看到我们可以在父组件中调用子组件中的方法