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

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

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>

执行结果:


http://www.kler.cn/a/297328.html

相关文章:

  • 【亲测有效】超高速扫描ip端口,可控制进程数,线程数,异步io链接并发数,超时时间,扫描到的端口服务信息说明
  • 传输层协议TCP
  • Java内存分配与回收:深入理解Java内存管理
  • 【最新综述】基于机器学习的超声焊接缺陷无损检测
  • Linux系统下配置MySQL
  • H5接入Steam 获取用户数据案例
  • redis分布式锁和lua脚本
  • VM kali2023挂载共享文件夹
  • Python 检测人脸筛选指定尺寸人脸图片
  • UI自动化-元素动作WebElement源码类
  • 标题:探索 HTML 与 JavaScript 实现的选项卡切换效果
  • 已解决:javax.xml.datatype.DatatypeConfigurationException 异常的正确解决方法,亲测有效!!!
  • 【软件设计】常用设计模式--工厂模式
  • React 事件系统解析
  • Optuna的使用
  • 探索 Web Vibration API 震动反馈:为网页增添触觉反馈
  • win的使用
  • 算法工程师重生之第二天(长度最小的子数组 螺旋矩阵II 区间和 开发商购买土地 总结 )
  • 嵌入式Linux学习笔记-C语言编译过程
  • 智能对决:提示词攻防中的AI安全博弈