特别注意，vm.$emit 发射函数中的eventName 发射名称不能含有大写字母，否则发射失败！（但是系统不会给你任何提示）
在Vue中尽量【少使用驼峰命名方式，少用大写字母】，不知道何时就出一些稀奇古怪的问题，无法自拔！！
例如：
vm.$emit(son-data,[...args]) 或
vm.$emit(son_data,[...args]) 或直接
vm.$emit(sondata,[...args])
组件模板代码如下：
<head>
<link rel="stylesheet" href="./src/css/bootstrap.css">
<link rel="stylesheet" href="./src/css/app.css">
<!-- 模板代码务必单独提出来，不能放在.container中，否则会报错，因为此作用域中的变量，在.container中没有！-->
<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]);
}
}
}
}
},
}
});
});