vue v-bind

<div id="app-7">
  <ol>
    <!--
      現(xiàn)在我們?yōu)槊總€(gè) todo-item 提供 todo 對(duì)象
      todo 對(duì)象是變量，即其內(nèi)容可以是動(dòng)態(tài)的。
      我們也需要為每個(gè)組件提供一個(gè)“key”，稍后再
      作詳細(xì)解釋。
    -->
    <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的作用是當(dāng)父組件的值修改時(shí)，子組件會(huì)更新。
那這里為什么不能用todo="item"，要用 v-bind:todo="item"把父組件的值傳過(guò)去呢？？這跟更新應(yīng)該沒(méi)關(guān)系吧。ps：本人新手。。

回答

編輯回答

尐懶貓

如果你直接寫(xiě) todo="item" 那就是傳遞了一個(gè)字符串給子組件，

父組件傳遞他的 item這個(gè)字符串，子組件用 todo 這個(gè)變量來(lái)接收

如果你寫(xiě)的 :todo="item" 或者 v-bind:todo="item" 那么就是傳遞了一個(gè)變量給子組件

父組件傳遞他的 item這個(gè)變量，子組件用 todo 這個(gè)變量來(lái)接收

2018年7月26日 16:09

編輯回答

尐懶貓

建議你可以再好好看看官方對(duì)于v-bind的描述v-bind - vue2.x API

用法：
動(dòng)態(tài)地綁定一個(gè)或多個(gè)特性，或一個(gè)組件 prop 到表達(dá)式。
在綁定 class 或 style 特性時(shí)，支持其它類型的值，如數(shù)組或?qū)ο蟆？梢酝ㄟ^(guò)下面的教程鏈接查看詳情。
在綁定 prop 時(shí)，prop 必須在子組件中聲明?？梢杂眯揎椃付ú煌慕壎愋汀?br>沒(méi)有參數(shù)時(shí)，可以綁定到一個(gè)包含鍵值對(duì)的對(duì)象。注意此時(shí) class 和 style 綁定不支持?jǐn)?shù)組和對(duì)象。

注意加粗的一行，所謂的動(dòng)態(tài)只是其一個(gè)功能，還有一個(gè)功能就是綁定一個(gè)組件prop到表達(dá)式你要干的事情，不就是這個(gè)嗎

話說(shuō)回來(lái)，你寫(xiě)成todo="item"這不就是在html標(biāo)簽中，編寫(xiě)了一個(gè)自定義屬性嗎，本質(zhì)上理解成class="item"也沒(méi)啥毛病，這是本質(zhì)上的不一樣。
換句話說(shuō)，你在這個(gè)標(biāo)簽中只有用到v-開(kāi)頭的屬性，在一般情況下才會(huì)跟vue對(duì)象產(chǎn)生聯(lián)系

2018年3月9日 15:17