本篇文章為大家展示了如何使用todolist入門全局組件和局部組件，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

創(chuàng)新互聯(lián)專注于黃龍網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供黃龍營銷型網(wǎng)站建設(shè)，黃龍網(wǎng)站制作、黃龍網(wǎng)頁設(shè)計、黃龍網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造黃龍網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供黃龍網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

 在理解入門全局組件和局部組件之前，我們有必要了解什么是“組件化”的概念。

組件化可以理解為頁面的一個組件或者一個部分，例如下圖，紅框部分可以劃分成一個組件，我們只需要寫好一個組件，然后循環(huán)數(shù)據(jù)即可。這個組件可能在在首頁、列表頁等任何地方使用，并不僅僅局限于當前頁面。

我們?nèi)匀灰宰詈唵蔚膖odolist入門Vue的全局組件和局部組件。我們把<li></li>拿出來作為一個組件，那么我們分別看看全局組件和局部組件分別如何實現(xiàn)。

全局組件

<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:['content'],
            template:"<li>{{content}}</li>"
        })


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

我們使用Vue.component()來定義一個全局組件，那么這個組件在當前頁面均可使用，而不僅僅是id="root"中。

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

TodoItem是組件名稱，在html中<todo-item></todo-item>使用

props是接收參數(shù)

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

同時還需要注意這里有一個父組件向子組件傳值：

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

我們來分析，list是輸入父組件的，todo-item屬于子組件，list中循環(huán)的數(shù)據(jù)item需要傳遞給全局組件，則用v-bind:content="item"傳遞，其中content就是子組件接收的數(shù)據(jù)，那么子組件定義接收props:['content']后，就可以template:"<li>{{content}}</li>"用content顯示數(shù)據(jù)了。

局部組件

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

<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>

        var TodoItem={
            props:['content'],
            template:"<li>{{content}}</li>"
        }

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

和全局組件不同的是，我們通過var TodoItem={}定義局部組件，定義后還要在new Vue中進行聲明

components:{
   'TodoItem':TodoItem
},

那么局部組件僅僅在id="root"中使用。

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

上述內(nèi)容就是如何使用todolist入門全局組件和局部組件，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：如何使用todolist入門全局組件和局部組件
分享路徑：http://aaarwkj.com/article28/igjicp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、移動網(wǎng)站建設(shè)、App設(shè)計、面包屑導(dǎo)航、自適應(yīng)網(wǎng)站、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)