当前位置：首页 > news >正文

Vue组件：使用$emit()方法监听子组件事件

news 2025/7/7 19:39:21

1、监听自定义事件

父组件通过使用 Prop 为子组件传递数据，但如果子组件要把数据传递回去，就需要使用自定义事件来实现。父组件可以通过 v-on 指令（简写形式“@”）监听子组件实例的自定义事件，而子组件可以通过调用内建的 $emit() 方法并传入事件名称来触发自定义事件。

组件之间的数据传递：

父传子：使用 Props 属性。

子传父：使用 $emit() 方法。

$emit() 方法的语法格式如下：

this.$emit( eventName, […args] )

参数说明：

eventName：传入事件的名称。

[…args]：触发事件传递的参数，该参数是非必选。

【实例】使用$emit()方法，实现子组件向父组件传递事件。

（1）创建 ParentComponent.vue 父组件

<template><fieldset><legend>父组件</legend><h3>父组件接收到子组件传递的数据：</h3><p>博客信息：{{ blogName }}</p><p>博客信息：{{ blogUrl }}</p><!-- 第三步：使用组件 --><ChildComponent @receiverData="getBlogInfo" /></fieldset>
</template><script>
//第一步：引用组件
import ChildComponent from '@/components/ChildComponent.vue'export default {data() {return {blogName: '',blogUrl: ''}},//第二步：注册组件components: {ChildComponent,},//方法methods: {getBlogInfo: function (blogName, blogUrl) {this.blogName = blogName;this.blogUrl = blogUrl;}}
}
</script>

（2）创建 ChildComponent.vue 子组件

<template><fieldset><legend>子组件</legend><button @click="sendData">传递数据给父组件</button></fieldset>
</template><script>
export default {data() {return {blogName: '您好，欢迎访问 pan_junbiao的博客',blogUrl: 'https://blog.csdn.net/pan_junbiao'}},methods: {sendData: function () {// 核心代码：使用 $emit() 方法this.$emit('receiverData', this.blogName, this.blogUrl);}}
}
</script>

（3）在 App.vue 根组件中，引入父组件

<template><!-- 第三步：使用组件 --><ParentComponent />
</template><script>
//第一步：引用组件
import ParentComponent from '@/components/ParentComponent.vue'export default {//第二步：注册组件components: {ParentComponent,}
}
</script><style></style>

执行结果：

2、组件事件配合 v-model 指令

如果是在子组件中用户输入数据，我们希望在获取数据的同时发生数据给父组件，这是可以配合 v-model 指令使用。

【实例】子组件中用户输入数据，在父组件中实时获取数据。

（1）修改 ParentComponent.vue 父组件

<template><fieldset><legend>父组件</legend><!-- 第三步：使用组件 --><ChildComponent @searchEvent="getSearch" /><h3>父组件接收到子组件传递的数据：</h3>接收到的搜索关键字：<input type="text" v-model="search" /></fieldset>
</template><script>
//第一步：引用组件
import ChildComponent from '@/components/ChildComponent.vue'export default {data() {return {search: ''}},//第二步：注册组件components: {ChildComponent,},//方法methods: {getSearch: function (keyword) {this.search = keyword;}}
}
</script><style>
input {width: 300px;padding: 3px;font-size: 16px;
}
</style>

（2）修改 ChildComponent.vue 子组件

<template><fieldset><legend>子组件</legend>搜索：<input type="text" v-model="search" /></fieldset>
</template><script>
export default {data() {return {search: ''}},// 监听器watch: {search(newValue, oldValue) {// 核心代码：使用 $emit() 方法this.$emit('searchEvent', newValue);}}
}
</script>

执行结果：