【vue】emit 的理解与使用
2024-01-07 18:21:55
介绍
$emit
是 Vue 组件实例中的一个方法,用来触发自定义事件,并向父组件传递信息- 它接受两个参数:事件名称和可选参数
this.$emit('事件名称', 参数);
流程
示例
效果
- 触发前
- 触发后
父组件
- 父组件使用子组件 Son
- 父组件给子组件绑定了 emit 事件
setTextEvent
setTextEvent
触发后,父组件会调用setText
进行处理
<template>
<h3>父组件</h3>
<p>
{{ text }}
</p>
<Son @setTextEvent="setText">
</Son>
</template>
<script>
import Son from "./Son.vue";
export default {
name: "Father",
components: {
Son
},
data() {
return {
text: ''
}
},
methods: {
setText(text) {
this.text = text;
}
}
}
</script>
子组件
- 放置了一个按钮,点击触发
setText
,这里的setText
和父组件的 methods 中的setText
没有任何关系,只是名字一样 - setText 中触发
setTextEvent
emit 事件,并传递参数 hello
<template>
<button @click="setText">子组件触发 emit</button>
</template>
<script>
export default {
name: "Son",
methods: {
setText() {
// 父组件绑定的 emit 事件是 setTextEvent
this.$emit('setTextEvent', 'hello')
}
}
}
</script>
文章来源:https://blog.csdn.net/m0_52733659/article/details/135389148
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!