Vue.js模板监听消息

Question

我有这个模板“template-main”：

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

我有一个使用此模板的简单页面

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

我想知道如何通过更改 template-main 变量的值的方式将一条消息从我的页面发送到我的模板。

我试试这个： 在我的简单页面上，我用以下方式启动我的活动：

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

在我的模板上，我用以下内容收听此消息：

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

但这不起作用！ 怎么解决这个问题？

Answer 1

如果我理解正确的话，你想从

template-main

到

your singple page

发出一个事件。

在

template-main

组件上，您必须通过

@click

发出事件

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



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

Anh 像

your single page

那样处理它

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

此代码用于选项 API