学到Vue的组件内传值时，props父传子还能理解，但是对子组件给父组件传值（也就是 $e mi t 方法），对于这个$ emit我感觉有点绕，知道它的作用，但是对它的用法还是掌握不好，主要还是对于为什么这么用很疑惑。

对父组件给子组件传值很简单，也很好理解。父组件给子组件传值只要在子组件标签内用V-bind写一个函数方法（也可以传参数）用props接收就可以直接使用了。但是到子组件给父组件传值就变得复杂了，首先要先在子组件标签内声明触发 $e mi t 的事件，触发条件后用$ 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.组件层级结构图

在这里插入图片描述

5.效果图

在这里插入图片描述

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

Vue中的$emit的使用与注释

1.子组件

2.父组件

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

4.组件层级结构图

5.效果图

猜你喜欢