【Vue】中this.$refs的使用
【 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>