提问人：aguiadouro 提问时间：10/6/2023 更新时间：10/8/2023 访问量：39
Vue.js 模板监听消息
Vue.js template listen to message
问：
我有这个模板“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>
但这行不通！ 如何解决这个问题？
答：
0赞
summerisbetterthanwinter
10/6/2023
#1
如果我理解正确的话，您希望从 发出一个事件。template-mainyour 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>
此代码适用于选项 API
评论
0赞
aguiadouro
10/6/2023
我想以相反的方式做到这一点。将消息从 [简单页面] 发送到 [模板]。
0赞
summerisbetterthanwinter
10/6/2023
@aguiadouro，我已经更新了我的答案。
评论