将指令从组件应用到子组件

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>

Answer 1

AFAIK，这不可能开箱即用。模板渲染器在幕后有一些魔法，但不支持此功能。您可以使用渲染函数来实现该功能，但这可能会变得相当复杂。

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

这是一个简单的例子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函数在具有该指令的所有组件上运行。然后您可以将其传递下来，而不是在父级上使用该指令