真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網站制作重慶分公司

Vue從TodoList中學父子組件通信

簡單的 TodoList

公司主營業(yè)務:網站制作、做網站、移動網站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現互聯(lián)網宣傳,提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化,感謝他們對我們的高要求,感謝他們從不同領域給我們帶來的挑戰(zhàn),讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出鄒城免費做網站回饋大家。

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

Vue從TodoList中學父子組件通信

用代碼實現這個效果:

  • {{item}}

當我在input框中輸入內容后,點擊提交,Vue 會自動將內容渲染在頁面中,具體是怎么實現的呢?

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

循環(huán)v-for

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

v-for="item in list"

將list中數據循環(huán)添加到頁面中,值為item

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

綁定v-model

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

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

v-model="inputVal"

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

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

組件化

每個li其實都是一個組件,我們可以用組件的形式來開發(fā)

全局組件:

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

局部組件:

  
  

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

component:{
  TodoList
}

用了組件后之后,就會涉及到數據通信,一般有兩種:

父 -> 子組件通信

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

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



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

    父 -> 子組件通信實現了往組件里面添加數據,如果子組件中要刪除一項,應該怎么操作呢?

    子 -> 父組件通信

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

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

    template: '
  • {{item}}
  • '' //綁定事件為 click,需要執(zhí)行的函數是 handleItemClick methods: { //寫在組件里面 handleItemClick() { this.$emit('delete', this.index) } }

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

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

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

    以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。


    新聞標題:Vue從TodoList中學父子組件通信
    分享路徑:http://weahome.cn/article/ieccod.html

    其他資訊

    在線咨詢

    微信咨詢

    電話咨詢

    028-86922220(工作日)

    18980820575(7×24)

    提交需求

    返回頂部