Vue 2.0 入門系列（5）元件例項之任務列表

心智極客發表於2017-04-26
Vue元件

什麼是元件

元件，其實很好理解，就是造輪子。比如，這裡是一個任務列表：

<div id="tasklist">
    <ul>
        <li>做作業</li>
        <li>寫報告</li>
        <li>讀書</li>
        <li>打掃</li>
    </ul>
</div>

我們完全可以將其封裝成元件，然後寫成以下這種形式：

<task-list>
    <task>打掃房間</task>
    <task>做作業</task>
    <task>寫報告</task>
    <task>讀書</task>
</task-list>

這樣做，可讀性是不是提高了很多？而且也更利於複用。接下來我們來一步步實現任務列表元件

任務列表元件實現

Vue 註冊元件，採用的是 Vue.component() 的方法，傳入標籤名與可選項。我們先來定義 task：

<div id="root">
    <task>做作業</task>
    <task>寫報告</task>
    <task>讀書</task>
    <task>打掃</task>
    <task></task>
</div>

<script>
    Vue.component(`task`,{
        template:`<li><slot>預設內容</slot></li>`
    })

    new Vue({
        el: `#root`
    });    
</script>

template 用於定義元件的 HTML 檢視。其中，<slot> 作為原始元素的插槽，自定義的內容將會取代 <slot>。如果沒有自定義內容，就會顯示預設的內容。

瀏覽器顯示：

做作業
寫報告
讀書
打掃
預設內容

現在，我們來定義 task-list 元件：

<div id="root">
    <task-list></task-list>
</div>

<script>

    Vue.component(`task-list`,{
        template:`
            <div>
                <task>做作業</task>
                <task>寫報告</task>
                <task>讀書</task>
                <task>打掃</task>
            </div>
        `
    })

    Vue.component(`task`,{
        template:’<li><slot></slot></li>’
    })

    new Vue({
        el: `#root`
    });    
</script>

首先，建立了一個 task-list 元件，並且在元件中呼叫了 task 元件。元件模板必須包括一個共同的根元素，因此定義了一個根元素 div。

這樣做不過是做了最簡單的封裝，我們希望任務列表以變數的方式傳遞進去，完全沒問題。元件其實跟 Vue 例項類似，也可以使用 methods，computed 等。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
    
</head>
<body>
    <div id="root">
        <task-list>
        </task-list>
    </div>

    <script>

        Vue.component(`task-list`,{
            template:`
                <div>
                    <task v-for="task in tasks">{{task.description}}</task>
                </div>
            `,
            data () {
                return {
                    tasks : [
                        {description:"程式設計",uncompleted:true},
                        {description:"鍛鍊",uncompleted:false},
                        {description:"閱讀",uncompleted:true},
                        {description:"睡覺",uncompleted:false}
                    ]
                }        
            }
        });

        Vue.component(`task`,{
            template:`<li><slot></slot></li>`
        });

        new Vue({
            el: `#root`
        });    
    </script>
</body>
</html>

特別要注意的是，元件中的 data 需要使用函式形式。這是因為，假如使用 data 屬性並且在檢視中如果定義多個 <task-list></task-list>，那麼它們之間就會共享該屬性，造成相互影響。

本節只是初步瞭解元件，接下來會建立更為實用的元件。

相關文章