一，可以获取dom节点
使用方法：this.$refs.自定义类名
<template>
<div id="app">
<div ref="domNode">我是一个div</div>
<button @click="handleClickDom">点击获取dom节点</button>
</div>
</template>
<script>
export default {
methods: {
handleClickDom() {
console.log(this.$refs.domNode)
// <div>我是一个div</div>
}
}
};
</script>
二，获取子组件中的data
使用方法：this.$refs.自定义类名.子组件data数据
-------------------子组件---------------------
<template>
<div>
{{ detailData }}
</div>
</template>
<script>
export default {
data() {
return {
detailData: "vue3.0"
}
}
}
</script>
-------------------父组件----------------------
<template>
<div id="app">
<detail ref="child"><detail/>
<button @click="handleClickDetail">获取detail组件中的值</button>
</div>
</template>
<script>
import detail from "./components/detail.vue";
export default {
components: {
detail
},
data() {
return {}
},
methods: {
handleClickDetail() {
console.log(this.$refs.child.detailData)
}
}
};
</script>
三，调用子组件的方法
使用方法：this.$refs.自定义类名.子组件方法名
-------------子组件------------
<template>
<div>
</div>
</template>
<script>
export default {
methods: {
click() {
console.log("我是子组件方法，我被调用了！")
}
}
}
</script>
-------------父组件------------
<template>
<div id="app">
<detail ref="child"><detail/>
<button @click="handleClickDetail">按钮</button>
</div>
</template>
<script>
import detail from "./components/detail.vue";
export default {
components: {
detail
},
data() {
return {}
},
methods: {
handleClickDetail() {
this.$refs.child.click();
}
}
};
</script>
