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，这是不可能的。模板渲染器在幕后有一些魔术，不支持此功能。您可以使用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函数在具有该指令的所有组件上运行。然后不用在父对象上使用该指令，而是将其传递给

将指令从组件应用于子项

1 个答案: