Блог

Главная - Вопросы по программированию - VueJS1 динамический $parent.$parent.длина функции

VueJS1 динамический $parent.$parent.длина функции

#javascript #vue.js #vue-component

#javascript #vue.js #vue-компонент

Вопрос:

Я пытаюсь использовать родительскую функцию в нескольких вложенных дочерних компонентах

 {{ $parent.$parent.testFunction('foo', 'bar') }}

Этот работает, но каждый раз, когда я меняю уровни в гнезде, мне приходится менять вызов, например:

 {{ $parent.testFunction('foo', 'bar') }}

Есть ли способ это исправить?
Родительский элемент не является элементом уровня $root, так что это не сработает. 🙂

Ответ №1:

Для этого было бы лучше использовать события, чтобы вы могли отправлять родительское дерево, а затем обрабатывать его по мере его поступления.

таким образом, не имеет значения, где в системе существуют ваши дочерние и родительские элементы.

 events: {
    "testFunction": function(foo, bar) {
        // Do Foobar
        return true; // Stops the event from going further
                     // return nothing to have it continue up the chain
    }
}

затем в вашем компоненте просто запустите

 this.$dispatch("testFunction", "Foo", "bar");

Комментарии:

1. $dispatch больше не существует в Vue 2.

2. @BillCriswell В вопросе указан VueJS 1

3. Хотя, похоже, OP использует эти методы в шаблонах, так что не уверен, что события так сильно помогут? Я думаю, что они должны просто импортировать метод в любой компонент, который в нем нуждается. (На мой взгляд, они действительно должны быть фильтрами).

4. Это будет зависеть от того, требует ли вызываемая функция родительского состояния или нет. универсальная функция, подобная этой, должна либо передавать состояние, либо не использовать состояние.

5. Мне пришлось немного изменить его, но this.$dispatch("testFunction", ["Foo", "bar"]); я решил его. Спасибо! 🙂

Ответ №2:

Я бы импортировал testFunction его в любой компонент, который должен использовать его лично.

 var doFoo = function () {
  console.log('foo')
}

// Component A
{
  methods: {
    doFoo: doFoo,
  }
}

// Component B
{
  methods: {
    doFoo: doFoo,
  }
}

Хотя, я думаю, вы действительно хотите использовать фильтры здесь.

Комментарии:

1. Если бы вы собирались использовать этот дизайн, я бы поместил его в микс, чтобы его можно было распределить по компонентам, которые в нем нуждаются.

2. Да, я предпочитаю, чтобы это было более явным. Если бы мне нужно было сгруппировать кучу вещей, я бы рассмотрел смешанный подход.

Метки: