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

注释很详细，直接上代码

上一篇

新增内容

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

源码

App.vue

<template>
  <div id="app">
   
    <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

TestComponent.vue

<template>
    <div>

    div>
template>

<script>
    export default {
        methods: {
            test() {
                console.log('我是Test组件中的方法!!!');
            }
        }
    }
script>

<style lang="less" scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果演示