Vue2.0父子组件之间通信

Question

我在子组件中出发父组件的事件，为什么监听不到？
代码如下：

<div id="app">
        <list></list>
    </div>
    <template id="tep">
        <div>
            <p>hello,这是父组件</p>
            <hr/>
            <tool-bar :msg="msg"  @fromChildMsg="listenChildMsg"></tool-bar>
        </div>
    </template>
    <template id="tep1">
    <div>
        <p>子组件</p>
        <p>{{msg}}</p>
        <button @click="subClick">触发父组件事件</button>
    </div>
    </template>
    <script>
        var toolBar = Vue.extend({
            props:['msg'],
            template:"#tep1",
            data:function(){
                return {
                }
            },
            methods:{
                subClick:function(){
                    console.log(1);
                    this.$emit('fromChildMsg', '这是子组件传递的消息');
                }
            }
        });
        var list = Vue.extend({
            template:'#tep',
            data: function(){
                return {
                    msg:"父组件传递子组件的数据"
                }
            },
            methods:{
                listenChildMsg:function(msg){
                    console.log(2);
                    console.log(msg);
                },
            },
            components:{
                'tool-bar':toolBar,
            },
        });
        new Vue({
            el:"#app",
            components:{
                list:list
            }
        });
    </script>
    
    点击按钮触发父组件事件，没有console语句输出，这是为什么？

Answer 1

props 會自動轉換，但是 自定義事件 似乎不會，所以你得把事件名稱改成 kebab-case:

<tool-bar :msg="msg"  @from-child-msg="listenChildMsg"></tool-bar>

this.$emit('from-child-msg', '这是子组件传递的消息');

補充說明：下面指的字符串模板是指：

{
   template: '這裡定義的就叫做符串模板'
}

因為字符串模板是直接可以由 javascript 解析，不用透過瀏覽器方法取得 Dom，所以不受此限制。

Answer 2

我在把子组件信息传递给父组件的时候，使用vue2.0的时候也遇到了一个坑，因为vue在1.0版本移除了events选项，同时也废除了$dispatch，所以不能使用原来的方法了。
那么看官网，我也看了一知半解，没有找到更好的办法，但是现行项目是一个小项目，目前还没有使用vuex的打算，但是我通过以下方法成功实现了通信。

---

// 在父组件里的created勾子进行监听子组件自定义的事件
created(){
    this.$on('child-event',(el)=>{
        console.log(el);
    })
}

在子组件里这样触发事件

this.$parent.$emit('child-event','el');

这样在子组件触发事件的时候父组件就可以收到信息了，原因是因为，组件各自的上下文是独立的，每一个vue实例，都有一个_event对象，这个对象保存了对应事件所要执行的回调函数，所以当你在子组件中只使用this.$emit去触发事件的时候，访问的只是本身的_event，而vue官方文档里说子组件可以通过$parent访问父实例，所以加上$parent就可实现了