1. $refs的使用
在使用vue框架的时候,尽量不要去操作原生的DOM
但是某些情况下,在组件中想要直接获取到元素对象或者子组件实例,vue提供了$refs
1.1 获取元素
点击查看代码
<template>
<div class="app">
<h2 ref="title">{{ title }}</h2>
<button @click="getTitle">获取title元素</button>
</div>
</template>
<script>
export default {
data(){
return {
title: "hello world"
}
},
methods: {
getTitle(){
console.log(this.$refs.title);
}
}
}
</script>
<style scoped>
</style>
1.2 获取组件实例
父组件可以获取到 组件的实例，那么就可以直接调用子组件中的方法