Vue.js模板监听消息

6vl6ewon 于 2023-10-23 发布在 Vue.js

关注(0)|答案(1)|浏览(126)

我有这个模板“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>

但这行不通！如何解决这个问题？

vue.js

来源：https://stackoverflow.com/questions/77239110/vue-js-template-listen-to-message

1条答案

按热度按时间

unftdfkk1#

如果我理解正确的话，您希望从template-main向your singple page发出一个事件。
在template-main组件上，必须通过@click发出事件

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


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

}
</script>

Anh处理它就像在your single page

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

此代码用于Option API

赞(0）回复(0）举报 2023-10-23

我来回答

Vue.js模板监听消息

1条答案

相关问题

热门标签

最新问答