从 vue 指令操作目标的 dom答案

【问题标题】：Manipulating dom of target from vue directive从 vue 指令操作目标的 dom
【发布时间】：2019-03-26 18:34:18
【问题描述】：

我想定义一个 vue 指令，在点击时切换弹出窗口的显示，我现在拥有的是：

toggle.js

export default {
    bind(el, binding) {
        console.log(binding.value); // this is undefined

        el.onclick = function() {
            console.log(binding.value); // this is undefined as well

            // toggle menu element display
        };
    }
};

组件.vue

<template>
    <button v-toggle="$refs.menu">
        ...
    </button>
    <div ref="menu">
        ...
    </div>
</template>

<script>
    import Toggle from 'path/to/toggle.js';

    export default {
        name: "Component",
        directives: {
            Toggle
        }
</script>

内部绑定函数 binding.value 始终未定义，可能是因为菜单引用尚未准备好。这样做的正确方法是什么？

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

$refs 在设置指令时不会被填充。您可以将其表达式设为函数，该函数将在点击发生时评估 $refs.menu，而不是在指令设置时。

new Vue({
  el: '#app',
  directives: {
    toggle: {
      bind(el, binding) {
        el.onclick = function() {
          const target = binding.value();

          target.classList.toggle('closed');
        };
      }
    }
  }
});

.closed {
  display: none;
}

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <button v-toggle="() => $refs.menu">
    Button
  </button>
  <div ref="menu">
    Some junk in the menu
  </div>
</div>

【讨论】：