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

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

article 2025/3/17 13:51:49

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>

执行结果：