快捷導(dǎo)航

Vue從TodoList中學(xué)父子組件通信

更新時(shí)間：2019年02月05日 15:26:13 作者：UCCs

這篇文章主要介紹了Vue從TodoList中學(xué)父子組件通信，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

簡(jiǎn)單的 TodoList

實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 todolist，當(dāng)我輸入內(nèi)容后，點(diǎn)擊提交自動(dòng)添加在下面，如下圖所示：

用代碼實(shí)現(xiàn)這個(gè)效果：

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

當(dāng)我在input框中輸入內(nèi)容后，點(diǎn)擊提交，Vue 會(huì)自動(dòng)將內(nèi)容渲染在頁(yè)面中，具體是怎么實(shí)現(xiàn)的呢？

我們都知道 Vue 是一個(gè) MVVM 框架，讓開(kāi)發(fā)者專(zhuān)注于數(shù)據(jù)變更，無(wú)需關(guān)注 Dom，所以它的核心是VM層，也就是說(shuō)渲染這部分不需要開(kāi)發(fā)者考慮了。

循環(huán)v-for

v-for指令是 Vue 提供的api，可以實(shí)現(xiàn)循環(huán)添加

v-for="item in list"

將list中數(shù)據(jù)循環(huán)添加到頁(yè)面中，值為item

所以當(dāng)我點(diǎn)擊提交時(shí)，只需要獲取到輸入框中的值，然后push到list中，我們看到的效果就是一個(gè)個(gè)添加。

綁定v-model

如何獲取輸入框中的值變成了一個(gè)問(wèn)題，沒(méi)用 Vue 之前，獲取輸入框中的值，非常簡(jiǎn)單，用$(input).val()就能輕松獲取。

用了 Vue 之后，不應(yīng)該操作 Dom 來(lái)獲取值，Vue 肯定也考慮到這點(diǎn)了，提供了一個(gè)api

v-model="inputVal"

第一次用這個(gè)指令時(shí)，踩了一個(gè)坑，我在inputVal兩邊加上了雙括號(hào)，從而導(dǎo)致頁(yè)面中沒(méi)任何反應(yīng)，這邊是不需要加雙括號(hào)的。渲染模版時(shí)才需要用 Vue 提供的模版字符串

一個(gè)簡(jiǎn)單的 TodoList 就已經(jīng)實(shí)現(xiàn)了。

組件化

每個(gè)li其實(shí)都是一個(gè)組件，我們可以用組件的形式來(lái)開(kāi)發(fā)

全局組件：

<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創(chuàng)建組件可創(chuàng)建一個(gè)全局組件，組件的名字TodoList在模版中需要用todo-list來(lái)實(shí)現(xiàn)，大小變小寫(xiě)，中間用-連接。

局部組件：

  <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:{   //注冊(cè)組件
     TodoList 
    },
    methods: {
      clickBtn() {
        this.list.push(this.inputVal)
        this.inputVal = ''
      }
    }
  })
</script>

使用局部組件，聲明一個(gè)對(duì)象，內(nèi)容和全局組件一樣，不過(guò)需要再 Vue 中注冊(cè)一下，使用component屬性注冊(cè)

component:{
  TodoList
}

用了組件后之后，就會(huì)涉及到數(shù)據(jù)通信，一般有兩種：

組件中如何才能拿到外面的數(shù)據(jù)
組件中數(shù)據(jù)變化，外面如何知道

父 -> 子組件通信

現(xiàn)在已經(jīng)用組件實(shí)現(xiàn)上面的功能了，但是組件中還沒(méi)有數(shù)據(jù)，如果將我輸入框中的數(shù)據(jù)傳遞給子組件。

子組件中獲取數(shù)據(jù)，還是用v-for循環(huán)，用v-bind綁定需要的數(shù)據(jù)，組件中用props獲取綁定的數(shù)據(jù)

<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 就是相關(guān)數(shù)據(jù)
}

父 -> 子組件通信實(shí)現(xiàn)了往組件里面添加數(shù)據(jù)，如果子組件中要?jiǎng)h除一項(xiàng)，應(yīng)該怎么操作呢？

子 -> 父組件通信

子 -> 父組件通信，Vue 提供了一個(gè)$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>

組件中綁定事件，第一個(gè)參數(shù)是事件名，第二個(gè)參數(shù)是要傳遞給父元素的參數(shù)

template: '<li v-on:click="handleItemClick">{{item}}</li>'' //綁定事件為 click，需要執(zhí)行的函數(shù)是 handleItemClick

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

父元素監(jiān)聽(tīng)事件

<todo-list v-for="(item,index) in list"
      v-bind:item="item"
      v-bind:index="index"
      v-on:delete="handleItemDelete"  //監(jiān)聽(tīng) delete 事件， 執(zhí)行函數(shù)是 handleItemDelete
></todo-list>

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

通過(guò)父子組件之間的通信，就可以實(shí)現(xiàn) 父->子子->父之間數(shù)據(jù)傳輸問(wèn)題。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: