在Vue.js中，当一个子组件被父组件引用时，父组件可以通过ref属性来创建一个指向子组件实例的引用。这个引用可以在父组件的模板或组件的方法中使用。
在父组件中使用ref来访问子组件的数据和方法：
- 首先，我们在子组件中定义一些数据和方法：
// ChildComponent.vue
<template><div><p>{{ message }}</p></div>
</template><script>
export default {data() {return {message: 'Hello from child component!'};},methods: {showMessage() {alert(this.message);}}
};
</script>
2.然后，在父组件中引用子组件，并使用ref属性来创建一个引用：
<!-- ParentComponent.vue -->
<template><div><child-component ref="childRef"></child-component><button @click="showChildMessage">Show Child Message</button></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {showChildMessage() {// 通过 this.$refs.childRef 访问子组件实例this.$refs.childRef.showMessage();}}
};
</script>
给子组件添加了一个ref属性，值为childRef。然后，在父组件的方法showChildMessage中，我们通过this.$refs.childRef来访问子组件的实例，并调用其showMessage方法。这样，我们就可以在父组件中间接地访问和操作子组件的数据和方法了。
扩展知识：
- 父传子：子组件设置props + 父组件设置v-bind
- 如何使用vue定义组件之——子组件调用父组件数据
- 子传父：组件的$emit + 父组件设置 v-on
- 如何使用vue定义组件之——父组件调用子组件数据
