Как подписаться на событие дочернего компонента?

Question

[beduin01]

<script>
export default {
  name: 'TableOfContent',
  methods: {
      itemClick(theguid)
      {
        console.log(theguid); // выводит на консоль
        this.$emit('newchapter', 777) // передаем 777 для теста
      }
  }

}
</script>

Теперь код компонента в который мы передаем данные:

<template>
    <toc :newchapter="foo(3)">
        <div class="Book">
            {{msg}}
        </div>
    </toc>
</template>

<script>
import toc from './TableOfContent.vue'

export default {
  props: ['theguid'],
  name: 'mybook',
  data () {
    return {
      msg: 'my main book'
    }
  },
  methods:
  {
      foo(id)
      {
          console.log("GUID is: ", id);
      }
  },

   components: {toc}

}
</script>

Для наглядности можно посмотреть на скриншоте.

Проблема в том, что у меня "foo" упорно не вызывается. Никак не могу понять в чем ошибка.

Answer 1

[Artem0071]

:newchapter="foo(3)"
попробуй заменить на
@newchapter="foo(3)"

@ - это что то вроде действия, и при нем сработает метод
в дочернем компоненте ты эмитом инициализируешь "дествие", а родитель как бы его перехватывает
Как то так)