Vue-模板引用

在某些情况下，需要直接访问底层DOM元素。可以使用特殊的ref属性

<input ref="input">

此属性是一个特殊的属性。允许我们在一个特定的DOM元素或子组件实例被挂载后，获得对它的直接引用。这可能很有用，比如说在组件挂载时将焦点设置到一个input元素上，或在一个元素上初始化一个第三方库。

访问模板引用

挂载结束后引用都会暴露在this.$refs之上

<script>
export default {
  mounted() {
    this.$refs.input.focus()
  }
}
</script>

<template>
  <input ref="input" />
</template>

注意：只能在组件挂载后才能访问模板引用。如果你想在模板中的表达式上访问$refs.input,在初次渲染时会是null。这是因为在初次渲染前这个元素还不存在。

如在v-for中使用模板引用。

<script>
export default {
  data() {
    return {
      list: [
        /* ... */
      ]
    }
  },
  mounted() {
    console.log(this.$refs.items)
  }
}
</script>

<template>
  <ul>
    <li v-for="item in list" ref="items">
      {{ item }}
    </li>
  </ul>
</template>

函数模板引用

ref属性还可以绑定为一个函数，会在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数：

<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">

组件上的ref

模板引用也可以被用在以恶搞子组件上。

如果一个子组件使用的是选项式API，被引用的组件实例和该组件的this完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。

expose选项可以用于限制对子组件实例的访问：

export default {
  expose: ['publicData', 'publicMethod'],
  data() {
    return {
      publicData: 'foo',
      privateData: 'bar'
    }
  },
  methods: {
    publicMethod() {
      /* ... */
    },
    privateMethod() {
      /* ... */
    }
  }
}