Vue常用組件的開發

cnsworder 發布于2019-08-26 12:01 / 932人閱讀

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

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

實戰：常用組件的開發

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

目錄文件：

index.html 入口頁

input-number.js 數字輸入框組件

index.js 根實例

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

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

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

Vue組件時單向數據流，無法從組件內部直接修改prop value的值。

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

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

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

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

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

watch監聽的數據的回調函數有2個參數可用，第一個是新的值，第二個是舊的值。

在回調函數里，this指向當前組件實例。所以可以直接調用this.updateValue()，因為Vue代理了props、data、computed及methods。

監聽currentValue的回調里，this.$emit("input",val)在使用v-model時改變value，this.$emit("on-change",val)是觸發自定義事件on-change，用于告知父組件數字輸入框的值有所變化。

在生命周期mounted鉤子里也調用了updateValue()方法，是因為第一次初始化時，也對value進行了過濾。

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

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

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

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

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

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

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

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

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

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

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

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

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

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