Vue常用組件的開發(fā)

cnsworder 發(fā)布于2019-08-26 12:01 / 938人閱讀

摘要：監(jiān)聽的回調(diào)里，在使用時改變，是觸發(fā)自定義事件，用于告知父組件數(shù)字輸入框的值有所變化。組件實例組件實例標簽頁組件每個標簽頁的主體內(nèi)容由使用組件的父級控制，這部分是一個，而且的數(shù)量決定標簽切換按鈕的數(shù)量。

查看原文站點，更多擴展內(nèi)容及更佳閱讀體驗！

實戰(zhàn)：常用組件的開發(fā)

數(shù)字輸入框只能輸入數(shù)字，而且有兩個快捷按鈕，可以直接減1或加1。除此之外，還可以設置初始值、最大/小值，在數(shù)值改變時，觸發(fā)一個自定義事件來通知父組件。

目錄文件：

index.html 入口頁

input-number.js 數(shù)字輸入框組件

index.js 根實例

先在template里定義組件的根節(jié)點，因為是獨立組件，所以應該對每個prop進行校驗。

接下來，先在父組件引入input-number組件。

value是一個關鍵的綁定值，使用v-model。大多數(shù)的表單組件都應該有一個v-model，比如輸入框、單選框、多選框、下拉選擇器等。

Vue組件時單向數(shù)據(jù)流，無法從組件內(nèi)部直接修改prop value的值。

解決辦法是給組件聲明一個data，默認引用value的值，然后在組件內(nèi)部維護這個data。

Vue.component("input-number", {
    data() {
        return {
            currentValue: this.value
        }
    }
});

這樣只解決了初始化時引用父組件value的問題，但是如果從父組件修改了value，input-number組件的currentValue也要一起更新。

監(jiān)聽（watch），watch選項用來監(jiān)聽某個prop或data的改變，當它們發(fā)生變化時，就會觸發(fā)watch配置的函數(shù)，從而完成業(yè)務邏輯。

從父組件傳遞過來的value可能不符合當前條件（大于max，或小于min），所以在methods中寫了一個方法updateValue，用來過濾出一個正確的currentValue。

watch監(jiān)聽的數(shù)據(jù)的回調(diào)函數(shù)有2個參數(shù)可用，第一個是新的值，第二個是舊的值。

在回調(diào)函數(shù)里，this指向當前組件實例。所以可以直接調(diào)用this.updateValue()，因為Vue代理了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()方法，是因為第一次初始化時，也對value進行了過濾。

input綁定了數(shù)據(jù)currentValue和原生的change事件，在句柄handleChange函數(shù)中，判斷了當前輸入的是否時數(shù)字。

See the Pen Vue組件實例 by whjin (@whjin) on CodePen.

GPU云服務器云服務器 vue組件開發(fā) vue組件 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108028.html

手挽手帶你學VUE：二檔組件開發(fā)以及常用全局api

摘要：我們想要在中做到子傳參給父，那我們的父組件就要像子組件伸出小偷之手。所在組件的更新時調(diào)用，但是可能發(fā)生在其子更新之前。指令所在組件的及其子全部更新后調(diào)用。視頻教程由于思否不支持視頻鏈接視頻請移步 http://www.henrongyi.top 你能學到什么二檔視頻當然要比一檔視頻難一點，如果前面的內(nèi)容還沒有消化完畢的話，還是建議大家繼續(xù)消化前面的內(nèi)容，然后再看接下來的部分。...

fredshare 2019-08-02 14:02 評論0 收藏0
手挽手帶你學VUE：二檔組件開發(fā)以及常用全局api

摘要：我們想要在中做到子傳參給父，那我們的父組件就要像子組件伸出小偷之手。所在組件的更新時調(diào)用，但是可能發(fā)生在其子更新之前。指令所在組件的及其子全部更新后調(diào)用。視頻教程由于思否不支持視頻鏈接視頻請移步 http://www.henrongyi.top 你能學到什么二檔視頻當然要比一檔視頻難一點，如果前面的內(nèi)容還沒有消化完畢的話，還是建議大家繼續(xù)消化前面的內(nèi)容，然后再看接下來的部分。...

Pink 2019-08-23 14:28 評論0 收藏0
Vue UI框架庫開發(fā)介紹

摘要：本文大家了解如何開發(fā)一個框架。偽組件化我們知道，組件化開發(fā)的目的是解耦功能，提高代碼復用率和開發(fā)效率，進而加快項目開發(fā)周期與產(chǎn)品發(fā)布速度。公司自有的庫一般不可能發(fā)布到倉庫。這樣我們就實現(xiàn)了插件的開發(fā)。主要就是利用這個特性開發(fā)的。本文大家了解如何開發(fā)一個Vue UI框架。Vue UI框架demo 源碼地址： https://github.com/xubaodian/... 。平時在項...

liangdas 2019-08-23 14:30 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發(fā)和面試問題，由基礎到困難循序漸進，適合面試和開發(fā)小程序。并總結vue React html css js 經(jīng)典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

pumpkin9 2019-08-23 17:12 評論0 收藏0