时间戳

首页 > 解决方案 > 将指令从组件应用到子组件

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

问题描述

在 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>

标签： javascriptvue.jsvue-component

解决方案

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函数在所有具有该指令的组件上运行。然后不要在父级上使用指令，而是将其传递下来

推荐阅读