Vue中ref的三种用法

转载：https://blog.csdn.net/qq_41929578/article/details/122671455

序言
最近在开发Vue项目，发现了一个ref的使用场景：将父组件中的值传递给子组件并且调用子组件的方法。
获取dom元素
获取子组件中的data
调用子组件中的方法
1.获取dom元素
通过`this.$refs.name`获取dom元素
// HTML
<div ref="myref">123</div>

// JS
let myDOM = this.$refs.myref;
console.log(myDOM); // <div data-v-4bf94fa0>123</div>
 
2.获取子组件中的data
// 子组件
<template>
<div>
我是子组件
</div>
</template>

<script>
export default {
data() {
return {
name: "myhua"
};
}
};
</script>

// 父组件

<template>
<div id="app">
<Son ref="myref"></Son>
</div>
</template>

<script>
import Son from "./components/son";
export default {
mounted() {
console.log(this.$refs.myref.name); //输出子组件data中的name的值：myhua
},
components: {
Son
}
};
</script>

 
3.调用子组件中的方法
// 子组件
<template>
<div>
我是子组件
</div>
</template>

<script>
export default {
methods: {
logName() {
console.log("myhua!!");
}
}
};
</script>

// 父组件

<template>
<div id="app">
<Son ref="myref"></Son>
</div>
</template>

<script>
import Son from "./components/son";
export default {
mounted() {
this.$refs.myref.logName();//子组件中的方法
},
components: {
Son
}
};
</script>

————————————————
版权声明：本文为CSDN博主「失忆症患者_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41929578/article/details/122671455