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

浅浅的花香味﹌ 2021-09-17 15:38 212阅读 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 条评论，212人围观）

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

相关阅读

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

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

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

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

在使用VUE开发的时候，有时候，我们需要通过父组件像子组件传递数据或者为了防止每个子组件都会有请求数据事件的发生，从而导致代码冗余，所以，我们可以把同一个模块下的所有子组

秒速五厘米/ 2023年03月02日 15:57/ 0 赞/ 12 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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