vue v-bind

Question

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>


Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})


var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

v-bind的作用是当父组件的值修改时，子组件会更新。
那这里为什么不能用todo="item"，要用 v-bind:todo="item"把父组件的值传过去呢？？这跟更新应该没关系吧。ps：本人新手。。

Answer 1

建议你可以再好好看看官方对于v-bind的描述v-bind - vue2.x API

用法：
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

注意加粗的一行，所谓的动态只是其一个功能，还有一个功能就是绑定一个组件prop到表达式你要干的事情，不就是这个吗

话说回来，你写成todo="item"这不就是在html标签中，编写了一个自定义属性吗，本质上理解成class="item"也没啥毛病，这是本质上的不一样。
换句话说，你在这个标签中只有用到v-开头的属性，在一般情况下才会跟vue对象产生联系

Answer 2

如果你直接写 todo="item" 那就是传递了一个字符串给子组件，

父组件传递 他的 item这个字符串 ，子组件用 todo 这个变量来接收

---

如果你写的 :todo="item" 或者 v-bind:todo="item" 那么就是传递了一个变量给子组件

父组件传递 他的 item这个变量 ，子组件用 todo 这个变量来接收