Javascript 如何将对象传递给Vue组件？

我想用数据对象调用Vue组件

todo项目标记有效。 todo-item2标记不起任何作用。 我期待同样的结果

HTML:

脚本：

var Todo = {
  props: ['text', 'isComplete'],
  template: '<p>{{ text }} : {{ isComplete }}</p>'
}

var Todo2 = {
  props: ['todo'],
  template: '<p>{{ todo.text }} : {{ todo.isComplete }}</p>'
}

new Vue({
  el: '#app',
  data: {
    todo: {
        text: 'Learn Vue',
        isComplete: false
        },
  },
  components: {
    todoItem: Todo,
    todoItem2: Todo2,
  }
})

我认为它无法识别todo-item2中的“文本”

控制台：

TypeError: Cannot read property 'text' of undefined
    at Proxy.eval (eval at createFunction (VM218 vue.js:10518), <anonymous>:2:43)
    at VueComponent.Vue._render (VM218 vue.js:4465)
    at VueComponent.updateComponent (VM218 vue.js:2765)
    at Watcher.get (VM218 vue.js:3113)
    at new Watcher (VM218 vue.js:3102)
    at mountComponent (VM218 vue.js:2772)
    at VueComponent.Vue$3.$mount (VM218 vue.js:8416)
    at VueComponent.Vue$3.$mount (VM218 vue.js:10777)
    at init (VM218 vue.js:4059)
    at createComponent (VM218 vue.js:5499)

---

你忘了指示v-bind witch属性你是不是应该绑定

变量Todo={ 道具：['text'，'isComplete']， 模板：'{{text}}:{{isComplete}}

' } var Todo2={ 道具：[待办事项]， 模板：'{{todo.text}}:{{{todo.isComplete}}

' } 新Vue{ el:“应用程序”， 数据：{ 待办事项：{ 文本：“学习Vue”， isComplete:错误 } }, 组成部分：{ 待办事项：待办事项， todoItem2:Todo2， } }

TypeError: Cannot read property 'text' of undefined
    at Proxy.eval (eval at createFunction (VM218 vue.js:10518), <anonymous>:2:43)
    at VueComponent.Vue._render (VM218 vue.js:4465)
    at VueComponent.updateComponent (VM218 vue.js:2765)
    at Watcher.get (VM218 vue.js:3113)
    at new Watcher (VM218 vue.js:3102)
    at mountComponent (VM218 vue.js:2772)
    at VueComponent.Vue$3.$mount (VM218 vue.js:8416)
    at VueComponent.Vue$3.$mount (VM218 vue.js:10777)
    at init (VM218 vue.js:4059)
    at createComponent (VM218 vue.js:5499)