Применить директиву от компонента к потомку - PullRequest
Новая
       8

Применить директиву от компонента к потомку

0 голосов
/ 31 октября 2018

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

1 Ответ

0 голосов
/ 31 октября 2018

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 работает на всех компонентах, которые имеют директиву. тогда вместо использования директивы для родителя вы передадите ее

...