vue2中子组件向父组件发射数据函数vm.$emit一个很大的坑（发射名有规则限制）

浅浅的花香味﹌ 2021-09-17 15:38 209阅读 0赞

### **特别注意，vm.$emit 发射函数中的eventName  发射名称不能含有大写字母，否则发射失败！（但是系统不会给你任何提示）** ###

### **在Vue中尽量【少使用驼峰命名方式，少用大写字母】，不知道何时就出一些稀奇古怪的问题，无法自拔！！** ###

### **例如：** ###

### **vm.$emit(son-data,\[...args\]) 或** ###

### **vm****.$emit(son\_data,\[...args\]) 或直接** ###

### **vm.$emit(sondata,\[...args\])**  ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70][]

### **组件模板代码如下：** ###

<head>
        <link rel="stylesheet" href="./src/css/bootstrap.css">
        <link rel="stylesheet" href="./src/css/app.css">
    
        
        <template id="parent">
                <div>
                    <p><span>这是一个父组件{
       {parent_value}} </span></p>
                    <my-son v-bind:son_value="parent_value" @son-data="click_parent(event)" ></my-son>
                    <hr >
                </div>
        </template>
        
        <template id="son">
                  <ol>
                      <li>这是一个子组件{
       {son_value}}</li>
                      <p><button @click='click_son(event)'>son按钮触发</button></p>
                  </ol>
         </template>
    
    </head>
    <body>
    
        <div class="container" >
                <my-parent v-bind:parent_value="g_data" ></my-parent>
        </div>
    </body>

js代码如下：

const app =  new Vue({
            el:".container",
            data:{
                g_data:"这是一个new Vue对象",
            },
            components:{
                "my-parent":{
                    template: "#parent",
                    //在自定义组件中，data必须是函数,最终返回一个对象（官方有说明）
                    data:function(){
                        return {
                            parent_data:"这是一个局部父组件模板",
                        }
                    },
                    props:["parent_value"],
                    methods:{
                        click_parent:function(...args) {
                            console.log(args);
                            console.log("接受成功");
                        }
                    },
                    //子组件
                    components:{
                        "my-son":{
                            template:"#son",
                            data:function() {
                                return {
                                    son_name:"发射成功",
                                }
                            },
                            props:["son_value"],
                                
                            methods: {
                                click_son:function(event) {
                                   console.log("son的按钮已经点击成功,等待接受数据.....");
                                    //这里的发射函数son-data如果改成son-Data中间出现大写字母，父组件迟迟接收不到结果。
                                    //尼玛不知道为什么会这样设置，找了很久，终于测试出来了！
                                   this.$emit("son-data",[this.son_value,this.son_name]);
                                }
                            }
                        }
                       
                    }
                    
                },
            }
    
        });
    
    
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70]: /images/20210812/39a135b9645545228336ccfe596e8fa6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读

相关父组件向子组件传递数据

既然存在父子关系，所以，肯定是在父组件中调用了子组件。而父组件向子组件传递的数据，可以通过在子组件上定义属性，将数据传递给自定义属性的值的方式，来实现父组件向子组件传递数据

太过爱你忘了你带给我的痛/ 2023年08月17日 17:09/ 0 赞/ 147 阅读

相关【前端】Vue中子组件向父组件传值

子组件通过$emit方法（用来触发事件）传递参数。子组件  <template>

谁践踏了优雅/ 2022年12月05日 13:55/ 0 赞/ 156 阅读

相关 Vue中子组件向父组件传递参数

> / > 父子组件传递数据 > 1）子组件向父组件传递数据：事件机制 > 子组件给父组件传递一个事件，并携带上数据 >

忘是亡心i/ 2022年11月10日 05:42/ 0 赞/ 198 阅读

相关父组件向子组件传递数据(vue.js)

父组件: app.vue 子组件: header.vue 子组件: <template> <div> <!-- logo 是在

深藏阁楼爱情的钟/ 2022年06月13日 09:11/ 0 赞/ 273 阅读

相关 vue2.0中的组件通信2——子组件向父组件传递数据

上一篇我写了父组件如何向子组件下发数据的操作，今天我们来聊聊子组件如何向父组件发送数据。在Vue.js中是通过事件来完成子组件向父组件发送数据的。代码沿用[上一篇][Li

灰太狼/ 2022年05月29日 07:57/ 0 赞/ 211 阅读

相关 Vue2 框架整理：组件props，父组件向子组件传递数据，单向数据流

![这里写图片描述][70] vue的组件除了要把模板内的内容进行复用外，更重要的是组件间要进行通信。父组件向子组件传递数据：通常子组件会通过父组件传递来的数据或参数

谁借莪１个温暖的怀抱￠/ 2022年05月22日 09:10/ 0 赞/ 400 阅读

相关【Vue】9.vue中子组件调用父组件的方法

vue中子组件调用父组件的方法，这里总结了三种： 1.直接在子组件中通过this.$parent.event来调用父组件的方法 Parent.vue <templ

刺骨的言语ヽ痛彻心扉/ 2022年03月22日 06:26/ 0 赞/ 211 阅读

相关 React中子组件向父组件传值

举例父组件: var React = require('react'); import {render} from 'react-dom'; im

╰+攻爆jí腚メ/ 2021年09月29日 04:18/ 0 赞/ 307 阅读

相关【子向父传参一】Vue-cli脚手架创建项目之子组件向子组件传递参数之$emit发射方法！！！

Child.vue文件（子组件发送数据） <template> <div class="child">

超、凢脫俗/ 2021年09月18日 10:52/ 0 赞/ 163 阅读

相关 vue2中子组件向父组件发射数据函数vm.$emit一个很大的坑（发射名有规则限制）

特别注意，vm.$emit 发射函数中的eventName 发射名称不能含有大写字母，否则发射失败！（但是系统不会给你任何提示）在Vue中尽量【少使用驼峰命名方式，

浅浅的花香味﹌/ 2021年09月17日 15:38/ 0 赞/ 210 阅读