Vue入門：todolist實例帶你入門全域元件和局部元件

在理解入門全域元件和局部元件之前，我們有必要了解什麼是「元件化」的概念。

元件化可以理解為頁面的一個元件或一個部分，例如下圖，紅框部分可以分割成一個元件，我們只需要寫好一個元件，然後循環資料即可。這個元件可能在首頁、清單頁等任何地方使用，並且不僅限於當前頁面。

我們仍然以最簡單的todolist入門Vue的全域元件和局部元件。我們把

全域元件

 
  提交 
 
  
 
 

我們使用Vue.component()來定義一個全域元件，那麼這個元件在目前頁面皆可使用，而不僅僅是id= "root"中。

Vue.component("TodoItem",{ props:['content'], template:"
{{content}}
" })

TodoItem是元件名稱，在html中 使用

props是接收參數

template定義元件樣式，或通俗說模板

同時還需要注意這裡有一個父元件傳值給子元件：

todo-item v-bind:content="item" v-for="item in list">

我們來分析，list是輸入父元件的，todo-item屬於子元件，list中循環的資料item需要傳遞給全域元件，則用v-bind:content="item"傳遞，其中content就是子元件接收的數據，那麼子組件定義接收props:['content']後，就可以template:"

局部元件

同樣的效果，我們使用局部元件來試試。

         

          

           
           提交
          
          

           < todo-item> < ul>
          
         

和全域元件不同的是，我們透過var TodoItem={}定義局部元件，定義後還要在new Vue中進行宣告

components:{ 'TodoItem':TodoItem },

那麼局部元件就只是在id=" root"中使用。

好了，以上就是todolist實例帶你入門全域元件和局部元件，升職加薪，Vue技能趕緊get起來吧！

以上是Vue入門：todolist實例帶你入門全域元件和局部元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！