Vue中的$emit的使用方法与理解

这篇具有很好参考价值的文章主要介绍了Vue中的$emit的使用方法与理解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  • 学到Vue的组件内传值时,props父传子还能理解,但是对子组件给父组件传值(也就是 e m i t 方法),对于这个 emit方法),对于这个 emit方法),对于这个emit我感觉有点绕,知道它的作用,但是对它的用法还是掌握不好,主要还是对于为什么这么用很疑惑。
  • 对父组件给子组件传值很简单,也很好理解。父组件给子组件传值只要在子组件标签内用V-bind写一个函数方法(也可以传参数)用props接收就可以直接使用了。但是到子组件给父组件传值就变得复杂了,首先要先在子组件标签内声明触发 e m i t 的事件,触发条件后用 emit的事件,触发条件后用 emit的事件,触发条件后用emit发送自定义事件(包含事件名与事件体)。
  • 到此还没结束,$emit发送事件或数据后,父组件是需要监听的,那就需要在父组件内用V-on绑定接收事件或数据。最后在父组件的methods或computed进行操作处理。
  • 目前我是这么理解的,也参考了其他人的博客或文章,可能理解比较片面,如果有错或者误人子弟也请联系我改正。这是我在学习路上的记录贴,文字描述肯定不直观,难以记忆,下面配上代码加深理解。

1.子组件

  Vue.component("son", {
                data() {
                    return {
                        msg: "我是子组件",
                        tip:"我是经过子组件改变的父组件"//tip是要传给父组件的数据
                    }
                },

                methods: {
                //这是写好的change方法
                    change: function () {
                        var sonMsg = this.tip //将tip数据赋值给sonMSg
                     
                        this.$emit("changeSon", sonMsg)/*用$emit发送自定义的事件(changeSons是自定义事件,sonMsg是参数,也是子组件要传给父组件的值,用的是函数传参)*/

                    }
                },
                template: `
                <div>
                    <h1>{{msg}}</h1><!-- 子组件中的msg -->
                    <button @click="change" type="submit">改变父组件</button>
                    <!-- 通过单击事件触发methods中的change方法 -->

                </div>`,
            })

2.父组件

  Vue.component("father", {

            data() {
                return {

                    msg: "我是父组件"
                }
            },
            methods: {
            /*定义好的方法,用来在父组件中把子组件传过来的值赋值给msg,来替换原本的值,这最后一步就完成了子组件对父组件的传值并且渲染到页面上 event也是$event*/
                changeFather: function (event) {
                    // console.log(event);
                    this.msg = event/*将传来的event,实际是tip的值赋值给父组件data中的msg*/

                }
            },

            template: `
                <div>
                    <h1>{{msg}}</h1>  <!-- 父组件中的msg -->
                    <son @changeSon="changeFather($event)"></son>
                    <!-- @changSon是监听数据或者说是接收数据的,这里的changeSon要与之前自定义的事件名称一致,changeFather方法是在父组件定义好的,$event是子组件传递的数据,也就是tip的值 -->

                </div>`,


        }),

3.完整代码(可直接运行)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <father>
        </father>
    </div>
    <script src="../js/Vue_2.7.10.js"></script>
    <script>
        Vue.component("father", {

            data() {
                return {
                    msg: "我是父组件"
                }
            },
            methods: {
                changeFather: function (event) {
                    // console.log(event);
                    this.msg = event
                }
            },
            template: `
                <div>
                    <h1>{{msg}}</h1>
                    <son @changeSon="changeFather($event)"></son>
                </div>`,
        }),
            Vue.component("son", {
                data() {
                    return {
                        msg: "我是子组件",
                        tip:"我是经过子组件改变的父组件"
                    }
                },

                methods: {
                    change: function () {
                        var sonMsg = this.tip
                        // console.log(sonMsg);
                        this.$emit("changeSon", sonMsg)
                    }
                },
                template: `
                <div>
                    <h1>{{msg}}</h1>
                    <button @click="change" type="submit">改变父组件</button>
                </div>`,
            })
        new Vue({
            el: "#app",
        })
    </script>
</body>

</html>

4.组件层级结构图

vue $emit,vue.js,javascript,前端

5.效果图

vue $emit,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-782231.html

到了这里,关于Vue中的$emit的使用方法与理解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 快速了解4种阻止事件冒泡的方法(原生js阻止,vue中使用修饰符阻止)

    前端结构 事件冒泡:clickSonBox事件发生时clickFatherBox事件也被触发了 此时点击子盒子 对话框弹出两次 方法1:使用js阻止事件冒泡 方法2:使用事件修饰符stop 绑定事件时,使用stop修饰符阻止事件冒泡 方法3:使用事件修饰符self 绑定事件时,使用self修饰符 表示只在本元素被点

    2024年02月16日
    浏览(36)
  • vue.js3 setup风格 element-ui 级联选择器clearCheckedNodes使用方法

    Cascader 级联选择器 | Element Plus 官方文档里提到可以清空选中节点,使用 clearCheckedNodes()方法:   具体用法: 1 先了解vue3 setup中怎么获取ref 获取方法非常简单,在需要获取的组件里写ref,在setup里定义同名空ref,就会自动获取了 定义ref: 在setup里定义同名空ref: 然后操作mu

    2024年02月12日
    浏览(41)
  • 深入理解Flutter中的GlobalKey与LocalKey(ValueKey、ObjectKey、UniqueKey)及其使用方法

    在Flutter中,Key是一个非常重要的概念,它用于标识和管理Widget。GlobalKey和LocalKey是Key的两个主要子类,而ValueKey、ObjectKey和UniqueKey则是LocalKey的具体实现。在本文中,我们将深入介绍这些关键概念以及它们在Flutter中的使用方法。 GlobalKey 是全局唯一标识一个Widget的Key。它通常用

    2024年01月25日
    浏览(36)
  • [uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑

    uni.$emit 和 uni.$on 是uniapp自带的跨页面传值    vue 父子通讯可以用 props  this.$emit   这种简单的父子通讯紧适用于 页面和组件 或者 组件之间的传值,他并不适用于页面和页面的互相传值 那要实现页面通讯呢,我们一起来看看uni.$emit 和 uni.$on的使用方法 示例:         A页面

    2024年02月02日
    浏览(41)
  • Vue的使用方法

    目录 1.软件下载 1.1 安装Nodejs服务器 1.2 安装npm 1.3 安装vue的脚手架 2.使用脚手架创建Vue工程 3.webstorm打开vue工程 3.1 对应项目各部分 3.2 关于项目的指令  4.关于main.js 4.1 一个组件引用另一个组件 4.2 父组件如何向子组件传值 5. 路由的用法  5.1 此处常见错误 5.1.1 template错误  

    2024年02月04日
    浏览(35)
  • Vue splice方法使用

    语法格式:splice(index, len, [item]) 可以用来替换/删除/添加数组内某一个值或几个值,该方法会改变初始数组。 index:数组开始下标 len:替换/删除的长度 item:替换的值,为删除时item为空 删除: 替换: 新增:

    2024年02月10日
    浏览(28)
  • vue 导入js中的方法

    目录 1 方法一:使用 标签 2 方法二:使用 import 语句 3 举例 3.1 js文件 3.2 vue 导入js文件 4 举例 4.1 js文件 4.2 vue 导入js文件 --XXX 是一个自定义的变量名 5 修改文件后一定要保存 在运行

    2024年02月12日
    浏览(34)
  • vue3中setup的两个参数 props,context (attrs,emit,slots),vue3中的双向数据绑定自定义事件emit和v-model

    目录 setup函数 props参数 案例 第一种写法(用setup函数的方式):  第二种方法(语法糖形式即setup写入script标签中)也可以传值,  context (attrs,emit,slots) vue3中的双向数据绑定自定义事件emit和v-model emit自定义事件 v-model 有两个参数分别是 props,context 即 props参数是一个 对象 ,

    2024年02月10日
    浏览(42)
  • 【Vue】Vue中mixins的使用方法及实际项目应用详解

    (1)mixin基础 官网解释(Vue2.x): 混入(mixin)提供了一种非常灵活的方式,来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。 如何理解mixins?我们可以将mixins理解成一

    2023年04月09日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包