使用 ref 直接访问元素

有时你需要直接访问一个 DOM 元素，你可以使用 ref 直接访问元素，而不需要使用 querySelector 或者其它选择 DOM 节点的原生方法。

使用 ref 访问一个元素，只需要将这个元素的 ref 属性设置为字符串，然后可以使用这个字符串访问元素：

<div id="app" v-cloak>
  <h3 ref="test" v-on:click="clickHandler">hello world</h3>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data() {
      return {};
    },
    methods: {
      clickHandler(e) {
        console.info(this.$refs.test);
      }
    }
  });
</script>

在 JavaScript 中，<h3> 这个元素（的节点对象）会被存储到 this.$ref 这个对象中，对应的 key 就是该元素的 ref 属性的值。

this.$refs 只包含当前组件内部元素的引用，这意味着如果在组件内部调用 this.$refs.xxx，它总指向该组件内的对应的元素，而不是别的地方的元素。

『The End』