注释很详细，直接上代码

上一篇

新增内容

1. 使用ref标记元素或组件
2. 通过$refs获取元素或组件实例

源码

App.vue

<template><div id="app"><!-- ref相当于为子组件或者元素绑定一个ref属性，然后通过this.$refs属性获取到对应的元素或者组件  可用于打印元素或者组件的信息或者调用子组件中的方法--><h1 ref="h1">ref用法演示</h1><TestComponent ref="testComponent" /> <button @click="OnTap">点击输出</button></div>
</template>
<script>javascript">
import TestComponent from "./components/TestComponent.vue";
export default {name: "App",components: {TestComponent},data() {return {};},methods: {OnTap(){//此处打印出h1元素信息console.log(this.$refs.h1);//此处调用TestComponent组件中的方法this.$refs.testComponent.test();}}
};
</script>
<style></style>

TestComponent.vue

<template><div></div>
</template><script>javascript">export default {methods: {test() {console.log('我是Test组件中的方法!!!');}}}
</script><style lang="less" scoped></style>

效果演示