欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 美景 > Vue.js Emit

Vue.js Emit

2024/11/30 8:41:31 来源:https://blog.csdn.net/wzcool273509239/article/details/142461239  浏览:    关键词:Vue.js Emit

在学习Vue.js 过程中发现有的例子不全面,记录下这些方便大家参考:

教程 | Vue.js (vuejs.org)

在Vue.js教程中介绍Emit的时候,仅初始化生效,这就导致Parent Component只可以在初始化时使用回调函数才可以获取到Child Component发送的消息。源代码如下:

<!--ChildComp.vue-->
<script setup>
const emit = defineEmits(['response'])emit('response', 'hello from child')
</script><template><h2>Child component</h2>
</template><!--App.vue, 即Parent-->
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'const childMsg = ref('No child msg yet')
</script><template><ChildComp @response="(msg) => childMsg = msg" /><p>{{ childMsg }}</p>
</template>

优化后如下:Parent组件可以接收子组件输入框的内容

<!--ChildComp.vue--><script setup>
import{ref} from 'vue'
const emit = defineEmits(['response'])const msg=ref('')
function sendMsg()
{emit('response',msg.value)
}
//emit('response',msg.value)//这个是原来的,只可以在加载的时候调用一次,导致@response只可以显示的用"(msg)=>{childMsg=msg;}", 而不可以调用function receiveMsg(msg)。
</script><template><h2>Child component</h2><input v-model="msg" placeholder="send message to parent" /><button @click="sendMsg">Send Msg</button>
</template><!--App.vue, 即Parent-->
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'const childMsg = ref('No child msg yet')
//此处是通过增加一个function发送
function receiveMsg(msg)
{childMsg.value=msg;
}</script><template><ChildComp @response="receiveMsg"  /><p>Message from Child: {{ childMsg }}</p>
</template>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com