從 TodoList 中學父子組件通信

簡單的 TodoList

實現一個簡單的 todolist，當我輸入內容後，點擊提交自動添加在下面，如下圖所示：

用代碼實現這個效果：

<div id="app">
    <input type="text" v-model="inputVal">
    <button v-on:click="clickBtn">提交</button>
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            list:[],
            inputVal:''
        },
        methods:{
            clickBtn(){
                this.list.push(this.inputVal)
                inputVal = ''
            }
        }
    })
</script>

當我在input框中輸入內容後，點擊提交，Vue 會自動將內容渲染在頁面中，具體是怎麼實現的呢？

我們都知道 Vue 是一個 MVVM 框架，讓開發者專注於數據變更，無需關注 Dom，所以它的核心是VM層，也就是說渲染這部分不需要開發者考慮了。

循環v-for

v-for指令是 Vue 提供的api，可以實現循環添加

v-for="item in list"

將list中數據循環添加到頁面中，值爲item

所以當我點擊提交時，只需要獲取到輸入框中的值，然後push到list中，我們看到的效果就是一個個添加。

綁定v-model

如何獲取輸入框中的值變成了一個問題，沒用 Vue 之前，獲取輸入框中的值，非常簡單，用$(input).val()就能輕鬆獲取。

用了 Vue 之後，不應該操作 Dom 來獲取值，Vue 肯定也考慮到這點了，提供了一個api

v-model="inputVal"

第一次用這個指令時，踩了一個坑，我在inputVal兩邊加上了雙括號，從而導致頁面中沒任何反應，這邊是不需要加雙括號的。渲染模版時才需要用 Vue 提供的模版字符串

一個簡單的 TodoList 就已經實現了。

組件化

每個li其實都是一個組件，我們可以用組件的形式來開發

全局組件：

<div id="app">
    <input type="text" v-model="inputVal">
    <button v-on:click="clickBtn">提交</button>
    <ul>
        <todo-list v-for="item in list"
                    v-bind:content="index"
        ></todo-list>
    </ul>
</div>
<script>
    Vue.component('TodoLsit',{
        props:['content'],
        template:`<li>{{content}}</li>`,
    })
    let vm = new Vue({
        el: '#app',
        data: {
            list: [],
            inputVal: ''
        },
        methods: {
            clickBtn() {
                this.list.push(this.inputVal)
                this.inputVal = ''
            }
        }
    })
</script>

用 Vue 提供的component創建組件可創建一個全局組件，組件的名字TodoList在模版中需要用todo-list來實現，大小變小寫，中間用-連接。

局部組件：

<div id="app">
    <input type="text" v-model="inputVal">
    <button v-on:click="clickBtn">提交</button>
    <ul>
        <todo-list v-for="item in list"
                  v-bind:content="item"
        ></todo-list>
    </ul>
</div>
<script>
    let TodoList = {
        props:['content'],
        template: `<li>{{content}}</li>`,
    }
    let vm = new Vue({
        el: '#app',
        data: {
            list: [],
            inputVal: ''
        },
        component:{     //註冊組件
          TodoList  
        },
        methods: {
            clickBtn() {
                this.list.push(this.inputVal)
                this.inputVal = ''
            }
        }
    })
</script>

使用局部組件，聲明一個對象，內容和全局組件一樣，不過需要再 Vue 中註冊一下，使用component屬性註冊

component:{
    TodoList
}

用了組件後之後，就會涉及到數據通信，一般有兩種：

1. 組件中如何才能拿到外面的數據
2. 組件中數據變化，外面如何知道

父 -> 子組件通信

現在已經用組件實現上面的功能了，但是組件中還沒有數據，如果將我輸入框中的數據傳遞給子組件。

子組件中獲取數據，還是用v-for循環，用v-bind綁定需要的數據，組件中用props獲取綁定的數據

<todo-list v-for="(item,index) in list"
           v-bind:content="item"
           v-bind:index="index"
           v-on:delete="handleItemDelete"
></todo-list>

let TodoList = {
    props:['content'],
    template: `<li>{{content}}</li>`,           // content 就是相關數據
}

父 -> 子組件通信實現了往組件裏面添加數據，如果子組件中要刪除一項，應該怎麼操作呢？

子 -> 父組件通信

子 -> 父組件通信，Vue 提供了一個$emit()方法，組件中使用v-on指令可綁定事件

<div id="app">
    <input type="text" v-model="inputVal">
    <button v-on:click="clickBtn">提交</button>
    <ul>
        <todo-list v-for="(item,index) in list"
                  v-bind:item="item"
                  v-bind:index="index"
                  v-on:delete="handleItemDelete"
        ></todo-list>
    </ul>
</div>
<script>
    Vue.component('TodoList',{
      props:['item', 'index'],
      template: `<li v-on:click="handleItemClick">{{item}}</li>`,
      methods: {
          handleItemClick() {
              this.$emit('delete', this.index)
          }
      }
    })
    let vm = new Vue({
        el: '#app',
        data: {
            list: [],
            inputVal: ''
        },
        methods: {
            clickBtn() {
                this.list.push(this.inputVal)
                this.inputVal = ''
            },
            handleItemDelete(index) {
                this.list.splice(index, 1)
            }
        }
    })
</script>

組件中綁定事件，第一個參數是事件名，第二個參數是要傳遞給父元素的參數

template: '<li v-on:click="handleItemClick">{{item}}</li>'' //綁定事件爲 click，需要執行的函數是 handleItemClick

methods: {                                  //寫在組件裏面
    handleItemClick() {
        this.$emit('delete', this.index)  
    }
}

父元素監聽事件

<todo-list v-for="(item,index) in list"
           v-bind:item="item"
           v-bind:index="index"
           v-on:delete="handleItemDelete"   //監聽 delete 事件， 執行函數是 handleItemDelete
></todo-list>

handleItemDelete(index) {                   //寫在 Vue 實例中
    this.list.splice(index, 1)
}

通過父子組件之間的通信，就可以實現 父->子 子->父 之間數據傳輸問題。