将组件中的指令应用于子组件

Question

在Vue.js中，如果我有一个组件，例如custom-input，我想从父类设置焦点，那么可以将来自父类的指令应用于子组件吗？

<custom-input v-focus />

<div class='form-group'>
  <input :v-focus='vFocus'> // This doesn't work
</div>

<script type='text/javascript'>
  Vue.directive("focus", {
    inserted: function(el) {
      el.focus();
    }
  });
</script>

- bradlis7

Answer 1

据我所知，这在“开箱即用”的情况下是不可能的。模板渲染器背后有一些神奇的操作，不支持此功能。您可以使用render函数实现该功能，但这可能会变得非常复杂。

更简单的解决方案是通过更新组件模板和指令来实现它。

以下是一个简单的示例： http://jsfiddle.net/7tzLgp1c/

Vue.directive("focus", {
  inserted: function(el, binding, vnode) {
    if (binding.value !== undefined && binding.value !== false)
      el.focus();
  }
});

new Vue({
  el: "#app",
  components: {
    foo: {
      props: {
        focus: {
          default: undefined,
        }
      },
      template: '<div><input v-focus="focus"></div>'
    }
  }
})

模板

<div id="app">
  <foo focus></foo>
  <foo></foo>
</div>

这里的诀窍在于在指令内部实现一个条件，因为指令的inserted函数会在所有具有该指令的组件上运行。然后，您可以将指令传递给子组件，而不是在父组件上使用指令。

- Daniel

---

这正是我所假设的，但我甚至找不到有人问这个问题。你排除 undefined 的原因是什么？这会导致没有值的 v-focus 无法工作。 - bradlis7

我使用了undefined和false，因为它允许不设置（undefined）和明确设置为false。这允许使用<foo focus/>和<foo :focus="true"/>，这是我认为的两个主要用例。但是，这只是一个示例，您应该根据自己的需求进行更改。 - Daniel