Vue.js template listen to message

by

I have this template “template-main”:

...
<template>
          ...
          <slot></slot>
          ...
</template>
...

Than I have my simple page that use this template

<template>
  <template-main>
    ...code of my page...
  </template-principal>
</template>

I Want to know how to send one message from my page to my template in the way that i can change a value of a variable of template-main.

I try this:
on my simple page I lauch my event with:

 this.$emit('message-to-template', 'hello');

on my template i listen to this message with:

<slot @message-to-template="handleMensagemRecebida"></slot>

but this dont work!
how to solf this?

  • Your page code and template-main are accessible from the same component, so just set a prop on the template-main element and have your page code set the prop value. No need for events.

    – 

If I understand correctly, you want to emit a event from template-main to your singple page.

On template-main component you have to emit a event by @click

<template>
...
     <slot>
        <button @click="$emit('message-to-template', 'hello')"></button>
    </slot>
...
</template>



<script>
export default {
     emits: ['message-to-template'],
}
</script>

Anh handle it like on your single page

<template>
  <template-main @message-to-template="handleMensagemRecebida">
    ...code of my page...
  </template-main>
</template>

This code is for Option API

Leave a Comment