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

在Vue.js中，如果我有一个组件，例如

自定义输入

，并且我想从父类设置焦点，那么父类的指令可以应用于子类吗

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

//这不管用
Vue.指令（“焦点”{
插入：功能（el）{
el.focus（）；
}
});

好的，这是不可能的。模板渲染器的幕后有点神奇，它不支持此功能。您可以使用render函数实现该功能，但这可能会变得相当复杂

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

下面是一个简单的例子

Vue.directive（“焦点”{
插入：函数（el、绑定、vnode）{
if（binding.value！==未定义&&binding.value！==false）
el.focus（）；
}
});
新Vue({
el:“应用程序”，
组成部分：{
傅：{
道具：{
重点：{
默认值：未定义，
}
},
模板：“”
}
}
})

模板

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

---

这里的诀窍是在指令内部实现一个条件，因为指令

inserted

函数在具有该指令的所有组件上运行。然后，不用对父级使用指令，而是将其向下传递

这是我假设的，但我甚至找不到有人问这个问题。是否有排除未定义的

的原因？它使没有值的
v-focus
无法工作。我使用了undefined和false，因为它完全不允许设置（undefined）并显式设置为false。这允许使用
和
，我认为这是两个主要用例。不过，这只是一个示例，您应该根据自己的需要进行更改
<div id="app">
  <foo focus></foo>
  <foo></foo>
</div>