資訊專欄INFORMATION COLUMN
摘要：監(jiān)聽的回調(diào)里，在使用時改變，是觸發(fā)自定義事件，用于告知父組件數(shù)字輸入框的值有所變化。組件實(shí)例組件實(shí)例標(biāo)簽頁組件每個標(biāo)簽頁的主體內(nèi)容由使用組件的父級控制，這部分是一個，而且的數(shù)量決定標(biāo)簽切換按鈕的數(shù)量。
查看原文站點(diǎn)，更多擴(kuò)展內(nèi)容及更佳閱讀體驗(yàn)！實(shí)戰(zhàn)：常用組件的開發(fā)
數(shù)字輸入框只能輸入數(shù)字，而且有兩個快捷按鈕，可以直接減1或加1。除此之外，還可以設(shè)置初始值、最大/小值，在數(shù)值改變時，觸發(fā)一個自定義事件來通知父組件。
目錄文件：
index.html 入口頁
input-number.js 數(shù)字輸入框組件
index.js 根實(shí)例
先在template里定義組件的根節(jié)點(diǎn)，因?yàn)槭仟?dú)立組件，所以應(yīng)該對每個prop進(jìn)行校驗(yàn)。
接下來，先在父組件引入input-number組件。
value是一個關(guān)鍵的綁定值，使用v-model。大多數(shù)的表單組件都應(yīng)該有一個v-model，比如輸入框、單選框、多選框、下拉選擇器等。
Vue組件時單向數(shù)據(jù)流，無法從組件內(nèi)部直接修改prop value的值。
解決辦法是給組件聲明一個data，默認(rèn)引用value的值，然后在組件內(nèi)部維護(hù)這個data。
Vue.component("input-number", {
data() {
return {
currentValue: this.value
}
}
});
這樣只解決了初始化時引用父組件value的問題，但是如果從父組件修改了value，input-number組件的currentValue也要一起更新。
監(jiān)聽（watch），watch選項(xiàng)用來監(jiān)聽某個prop或data的改變，當(dāng)它們發(fā)生變化時，就會觸發(fā)watch配置的函數(shù)，從而完成業(yè)務(wù)邏輯。
從父組件傳遞過來的value可能不符合當(dāng)前條件（大于max，或小于min），所以在methods中寫了一個方法updateValue，用來過濾出一個正確的currentValue。
watch監(jiān)聽的數(shù)據(jù)的回調(diào)函數(shù)有2個參數(shù)可用，第一個是新的值，第二個是舊的值。
在回調(diào)函數(shù)里，this指向當(dāng)前組件實(shí)例。所以可以直接調(diào)用this.updateValue()，因?yàn)閂ue代理了props、data、computed及methods。
監(jiān)聽currentValue的回調(diào)里，this.$emit("input",val)在使用v-model時改變value，this.$emit("on-change",val)是觸發(fā)自定義事件on-change，用于告知父組件數(shù)字輸入框的值有所變化。
在生命周期mounted鉤子里也調(diào)用了updateValue()方法，是因?yàn)榈谝淮纬跏蓟瘯r，也對value進(jìn)行了過濾。
input綁定了數(shù)據(jù)currentValue和原生的change事件，在句柄handleChange函數(shù)中，判斷了當(dāng)前輸入的是否時數(shù)字。
See the Pen Vue組件實(shí)例 by whjin (@whjin) on CodePen.
每個標(biāo)簽頁的主體內(nèi)容由使用組件的父級控制，這部分是一個slot，而且slot的數(shù)量決定標(biāo)簽切換按鈕的數(shù)量。
文件目錄：
index.html 入口頁
style.css 樣式表
tabs.js 標(biāo)簽頁外層的組件tabs
pane.js 標(biāo)簽頁嵌套的組件pane
pane需要控制標(biāo)簽頁內(nèi)容的顯示與隱藏，設(shè)置一個data:show，并且用v-show指令來控制元素。
getTabs是一個公用的方法，使用this.$children來取到所有的pane組件實(shí)例。
在methods中使用了有function回調(diào)的方法時，在回調(diào)內(nèi)的this不再執(zhí)行當(dāng)前的Vue實(shí)例，也就是tabs組件本身，需要在外層設(shè)置一個_this=this的局部變量來間接使用this。
遍歷每一個pane組件后，把它的label和name提取出來，構(gòu)成一個Object并添加到數(shù)據(jù)navList數(shù)組里。
在使用v-for指令循環(huán)顯示tab標(biāo)題時，使用v-bind:class指向了一個名為tabCls的methods來動態(tài)設(shè)置class名稱。
點(diǎn)擊每個tab標(biāo)題時，會觸發(fā)handleChange方法來改變當(dāng)前選中tab的索引，也就是pane組件的name。在watch選項(xiàng)中監(jiān)聽了currentValue，當(dāng)其發(fā)生變化時，觸發(fā)updateStatus方法來更新pane組件的顯示狀態(tài)。
使用組件嵌套的方式，將一系列pane組件作為tabs組件的slot；tabs組件和pane組件通信上，使用了$parent和$children的方法訪問父鏈和子鏈；定義了prop:value和data:currentValue，使用$emit("input")來實(shí)現(xiàn)v-model的用法。
See the Pen Vue-tabs by whjin (@whjin) on CodePen.
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/108028.html
摘要：我們想要在中做到子傳參給父，那我們的父組件就要像子組件伸出小偷之手。所在組件的更新時調(diào)用，但是可能發(fā)生在其子更新之前。指令所在組件的及其子全部更新后調(diào)用。 視頻教程 由于思否不支持視頻鏈接 視頻請移步 http://www.henrongyi.top 你能學(xué)到什么 二檔視頻當(dāng)然要比一檔視頻難一點(diǎn)，如果前面的內(nèi)容還沒有消化完畢的話，還是建議大家繼續(xù)消化前面的內(nèi)容，然后再看接下來的部分。...
摘要：我們想要在中做到子傳參給父，那我們的父組件就要像子組件伸出小偷之手。所在組件的更新時調(diào)用，但是可能發(fā)生在其子更新之前。指令所在組件的及其子全部更新后調(diào)用。 視頻教程 由于思否不支持視頻鏈接 視頻請移步 http://www.henrongyi.top 你能學(xué)到什么 二檔視頻當(dāng)然要比一檔視頻難一點(diǎn)，如果前面的內(nèi)容還沒有消化完畢的話，還是建議大家繼續(xù)消化前面的內(nèi)容，然后再看接下來的部分。...
摘要：本文大家了解如何開發(fā)一個框架。偽組件化我們知道，組件化開發(fā)的目的是解耦功能，提高代碼復(fù)用率和開發(fā)效率，進(jìn)而加快項(xiàng)目開發(fā)周期與產(chǎn)品發(fā)布速度。公司自有的庫一般不可能發(fā)布到倉庫。這樣我們就實(shí)現(xiàn)了插件的開發(fā)。主要就是利用這個特性開發(fā)的。 本文大家了解如何開發(fā)一個Vue UI框架。Vue UI框架demo 源碼地址： https://github.com/xubaodian/... 。 平時在項(xiàng)...
摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
閱讀 1081·2021-11-18 10:07
閱讀 2494·2021-10-14 09:42
閱讀 5510·2021-09-22 15:45
閱讀 673·2021-09-03 10:29
閱讀 3578·2021-08-31 14:28
閱讀 1986·2019-08-30 15:56
閱讀 3125·2019-08-30 15:54
閱讀 1104·2019-08-29 11:32
