How to subscribe to the event of a child component?

Question

Vue.js

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

}
</script>

Now the code of the component to which we pass data:

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

For clarity, you can see the screenshot .

The problem is that "foo" is stubbornly not being called for me. I can't figure out what's wrong.

Answer 1

:newchapter="foo(3)"
try to replace it with
@ - it's something like an action, and with it the method
in the child component will work, you initialize the "action" with an emitter, and the parent seems to intercept
it Something like this)