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

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

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

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

拿出來當作一個元件，那麼我們分別看看全域元件和局部元件分別如何實作。

全域元件

<div id="root">
        <div>
            <input v-model="inputValue" />
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>

            <todo-item v-bind:content="item" v-for="item in list"></todo-item>
        </ul>
    </div>

    <script>
        Vue.component("TodoItem",{
            props:[&#39;content&#39;],
            template:"<li>{{content}}</li>"
        })


        new Vue({
            el:"#root", 
            data:{
                inputValue:&#39;&#39;,
                list:[]
            },
            methods:{
                handleSubmit:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = &#39;&#39;  //每次提交后清空
                }
            }
        })
    </script>

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

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

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

props是接收參數

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

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

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

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

{{content}}

"用content顯示資料了。

局部元件

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

        

            
            提交
        
        

            
    

    <script>

        var TodoItem={
            props:[&#39;content&#39;],
            template:"<li>{{content}}</li>"
        }

        new Vue({
            el:"#root", 
            data:{
                inputValue:&#39;&#39;,
                list:[]
            },
            components:{
                &#39;TodoItem&#39;:TodoItem
            },
            methods:{
                handleSubmit:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = &#39;&#39;  //每次提交后清空
                }
            }
        })
    </script>

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

components:{
   'TodoItem':TodoItem
},

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

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

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