Блог

Главная - Вопросы по программированию - Vue, несколько экземпляров одного и того же компонента каким-то странным образом обрабатывают события

Vue, несколько экземпляров одного и того же компонента каким-то странным образом обрабатывают события

#javascript #vue.js #events #nuxt.js

Вопрос:

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

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

Я что-то упускаю?

Вот краткий пример того, что я делаю

Пользовательский компонент

 <template>
....// Some code that at a certain point calls myMethod
</template>
<script>
export default {
  methods: {
    myMethod () {
      this.$emit('picture-taken')
    }
  }
}
</script>

Страница, на которой я использую пользовательский компонент

 <template>
  <custom-component @picture-taken="func1" />
  <custom-component @picture-taken="func2" />
</template>

<script>
export default {
  methods: {
    func1() {
      debugger
      //It always ends up here
    },
    func2() {
      debugger
    },
  }
}
</script>

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

1. Вот, что вы написали: «в случае @picture-taken какого-либо события позвоните func1 и func2 «. Поскольку у вас есть прослушиватель для обоих компонентов, будут вызваны оба метода. Это полностью работает, как и ожидалось.

2. Но есть два отдельных экземпляра, которые должны жить независимо друг от друга. Если я что-то сделаю в первом экземпляре, он должен вызвать func1, в противном случае func2. Он всегда вызывает первый (не оба)

3. Их данные и жизненные циклы живут сами по себе. Но здесь вы слушаете событие в родительской области, кроме того, у вас есть debugger событие, которое, вероятно, блокирует код, чтобы он не достиг func2 .

4. В случае, если это поможет, я также попытался передать функцию в качестве поддержки компоненту, а затем, вместо того, чтобы выдавать событие, я вызвал эту функцию. Тот же результат, вызывается только функция func1. функция func2 никогда не вызывается, отладчик она или нет.

5. В Vue вы не должны передавать функции внутри реквизита.

Ответ №1:

Такой код подходит для вашего варианта использования.

parent page 

 <template>
  <div>
    <child :id="1" @picture-taken="callSpecificFunction"></child>
    <child :id="2" @picture-taken="callSpecificFunction"></child>
  </div>
</template>

<script>
export default {
  auth: false,
  methods: {
    callSpecificFunction(id) {
      console.log('id emitted', id)
      this[`function${id}`]()
    },
    function1() {
      console.log('function1 called')
    },
    function2() {
      console.log('function2 called')
    },
  },
}
</script>

Child.vue 

 <template>
  <button @click="emitPlease">please do emit for id {{ id }}</button>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: 1,
    },
  },
  methods: {
    emitPlease() {
      this.$emit('picture-taken', this.id)
    },
  },
}
</script>

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

1. это не работает. Я начинаю думать о какой-то ошибке или проблеме с версией vue/nuxt, которую я использую. Похоже, он неправильно передает какую-либо опору. Внутри «ребенка» опора this.id всегда равно «1».

2. @sangio90 то, что я связал с вами, работает и передал либо идентификатор 1 , либо 2 . Возможно, у вас была опечатка или что-то в этом роде. Пожалуйста, дважды проверьте свой код.

3. Это была моя вина, но найти ее было не так-то просто. Оказалось, что внутри компонента был <тип ввода=»файл»> с фиксированным идентификатором, поэтому у меня было 2 ввода с одним и тем же идентификатором и, следовательно, случайное поведение. Теперь он безупречно работает с кодом из моего первого примера. Большое спасибо за ваше время 🙂

Метки: ,