Vue經常使用組件的開闢

2024年1月26日 133次阅读 来源: whjin

檢察
原文站點，更多擴大內容及更佳瀏覽體驗！

實戰：經常運用組件的開闢

数字輸入框只能輸入数字，而且有兩個快速按鈕，能夠直接減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函數中，推斷了當前輸入的是不是時数字。

<p data-height=”365″ data-theme-id=”0″ data-slug-hash=”oyzBWM” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue組件實例” class=”codepen”>See the Pen Vue組件實例 by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>

標籤頁組件

每一個標籤頁的主體內容由運用組件的父級掌握，這部份是一個slot，而且slot的數目決議標籤切換按鈕的數目。

文件目次：

  • index.html 進口頁
  • style.css 樣式表
  • tabs.js 標籤頁外層的組件tabs
  • pane.js 標籤頁嵌套的組件pane

pane須要掌握標籤頁內容的顯現與隱蔽，設置一個data:show，而且用v-show指令來掌握元素。

getTabs是一個公用的要領，運用this.$children來取到一切的pane組件實例。

在methods中運用了有function回調的要領時，在回調內的this不再實行當前的Vue實例，也就是tabs組件自身，須要在外層設置一個_this=this的局部變量來間接運用this。

遍歷每一個pane組件后，把它的label和name提取出來，組成一個Object並添加到數據navList數組裡。

在運用v-for指令輪迴顯現tab題目時，運用v-bind:class指向了一個名為tabCls的methods來動態設置class稱號。

點擊每一個tab題目時，會觸發handleChange要領來轉變當前選中tab的索引，也就是pane組件的name。在watch選項中監聽了currentValue，當其發生變化時，觸發updateStatus要領來更新pane組件的顯現狀況。

運用組件嵌套的體式格局，將一系列
pane組件作為
tabs組件的
slot；
tabs組件和
pane組件通信上，運用了
$parent和
$children的要領接見父鏈和子鏈；定義了
prop:value和
data:currentValue，運用
$emit('input')來完成
v-model的用法。

<p data-height=”365″ data-theme-id=”0″ data-slug-hash=”vrXWQw” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-tabs” class=”codepen”>See the Pen Vue-tabs by whjin (@whjin) on CodePen.</p>
<script async src=”https://static.codepen.io/ass…;></script>

    原文作者：whjin
    原文地址: https://segmentfault.com/a/1190000015215564
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞