标签：Vue name data refs Son export 组件 用法 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

标签：Vue,name,data,refs,Son,export,组件,用法,ref
来源： https://www.cnblogs.com/testzcy/p/16379316.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。