vue debounce 延迟 v-ref 子组件索引 v-el dom索引

[5Mi]

• debounce 过滤器 和 debounce属性

  限制： 指令的值须是函数，如 v-on

  参数： {Number} [wait] - 默认值： 300

  用法：

  包装处理器，让它延迟执行 x ms， 默认延迟 300ms。包装后的处理器在调用之后至少将延迟 x ms， 如果在延迟结束前再次调用，延迟时长重置为 x ms。

  示例：

  <input @keyup="onKeyup | debounce 500">

  debounce属性 设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如在输入提示中 Ajax 请求），它较为有用。

  <input v-model="msg" debounce="500">

  注意 debounce 参数不会延迟 input 事件：它延迟“写入”底层数据。因此在使用 debounce 时应当用 vm.$watch() 响应数据的变化。若想延迟 DOM 事件，应当使用 debounce 过滤器。

• v-ref

在父组件上注册一个子组件的索引，便于直接访问。不需要表达式。必须提供参数 id。可以通过父组件的 $refs 对象访问子组件。

在和 v-for 一起用时，注册的值将是一个数组，包含所有的子组件，对应于绑定数组。如果 v-for 用在一个对象上，注册的值将是一个对象，包含所有的子组件，对应于绑定对象。

<comp v-ref:child></comp>
<comp v-ref:some-child></comp>

// 从父组件访问
this.$refs.child
this.$refs.someChild

• v-el

为 DOM 元素注册一个索引，方便通过所属实例的 $els 访问这个元素。

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>

this.$els.msg.textContent // -> "hello"
this.$els.otherMsg.textContent // -> "world"

---