vue快速入门（四十二）ref与$refs的使用

注释很详细，直接上代码

上一篇

新增内容

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>
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>
    export default {
        methods: {
            test() {
                console.log('我是Test组件中的方法!!!');
            }
        }
    }
</script>

<style lang="less" scoped>

</style>

效果演示