在练习vue框架的使用，在写一个todo的demo，我把input元素(new-input组件)和展示待办事项的ul，li元素(todo-items和todo-item组件)写成了两个平行的组件，现在在input组件中输入文字添加，使用公共事件总线触发update事件，在todo-items组件的生命周期中创建钩子函数监听update事件并修改组件中的数据，这时问题来了，报错显示该组件的todos数组为undefined

下面贴代码

var bus = new Vue({});

var todoItem = Vue.component('todo-item', {
    props:['todo'],
    template:'
{{todo.text}}
×
',
    data:function(){
        return {
            isDone:false
        }
    },
    methods:{
        done:function(){
            this.$emit('hasDone');
            this.isDone = !this.isDone;
        },
        deleteIt:function(){
            this.$emit('hasDelete');
        }
    }    
});
var todoItems = Vue.component('todo-items', {
    template:'
',
    data:function(){
        return {
            todos:[
                {text:'nodeJS'},
                {text:'vue.js'}
            ]
        }
    },
    components:{
        'todo-item':todoItem
    },
    methods:{
        deleteItem:function(index){
            this.todos.splice(index, 1);
        },
        update:function(value){
            this.todos.push(value);
        }
    },
    created(){
        bus.$on('updateData', function(value){
            this.todos.push(value);
        })
    }
})

var newInput = Vue.component('new-input', {
    template:'',
    data:function(){
        return {
            value:''
        }
    },
    methods:{
        update:function(){
            bus.$emit('updateData', {text:this.$refs.input.value});
        }
    }
})

var todo = new Vue({
    el:'#todo',
    components:{
        "todo-items":todoItems,
        "new-input":newInput
    }
})

不知道什么原因，todo-items中的deleteItem方法又可以操作todos数组。