Vue中this.$refs的使用及说明
作者:咸鱼妹妹
Vue中this.$refs用于访问通过ref注册的元素或组件,需在mounted后使用,可在JS操作DOM或调用子组件方法,注意避免模板中直接使用
Vue使用this.$refs
父组件
<template> <div> <!-- ref 写在标签上时:this.$refs.名字 获取的是标签对应的dom元素 ref写在组件上时:这时候获取到的是子组件(比如navChild)的引用 --> <Child ref="navChild"/> </div> </template> <script> import Child from "@/components/child"; export default { name: "App", methods: { navFn(){ // this.$refs.navChild 或者 this.$refs['navChild'] // 第一种使用情况(父组件调用子组件的方法) this.$ref.navChild.initData(); // 第二种使用情况(父组件调用子组件的方法,并通过方法传值) this.$refs.navChild.initData('我是父组件的传值') // 第四种使用情况(父组件获取子组件的数据) this.$ref.navChild.status // 第四种使用情况(父组件获取子组件的数据,并改变数据) this.$ref.navChild.status = 1; } }, }; </script>
子组件
<template> <div> <div>{{message}}</div> </div> </template> <script> export default { name: "Child", data() { return { message:'这是子组件', status:0 }; }, components: {}, created() { console.log(this.$data.status); //1(通过this.$data获取所有变量) this.status = this.$data.status; }, methods:{ initData(val){ // 方法二:获取父组件的传值 console.log(val); //我是父组件的传值 this.message = val; let name = 'Hello World'; } } }; </script> <style scoped> </style>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。