你必須要注意的vue元件使用細節

這次帶給大家你必須要注意的vue組件使用細節，vue組件使用細節的注意事項有哪些，下面就是實戰案例，一起來看一下。

細節一

基礎範例

執行結果:

以上大家都懂，這邊就不多說，回到程式碼裡，有時候我們需要tbody 裡面每一行是一個子元件，那我們程式碼可以怎麼寫呢？我們可以這樣寫，定義一個全域元件，如下：

然後我們在body 裡面可以這麼呼叫:

運行結果:

可以看到row 是有列印出來了，但它其實裡面沒有任務內容，那我們的問題出在哪裡？回到程式碼我們發現我們在創建vue 實例的時候沒有指定要掛載的點，所以我們透過el 來指定vue 接管的Dom ,如下:

##運行結果:

感覺上沒有問題，但真的是這樣嗎？我們透過檢查元素，查看DOM結構:

大家可以看到出錯啦？正常的三個 tr 應該是在 tbody 裡面， 而現在跑到 tbody 同一層了，這是怎麼回事？

在H5的規格裡面，要求我們 table 裡面有 tbody, tbody 裡面必須得放 tr,而現在我們使用子元件裡面寫成 row, 所以我們的瀏覽器在解析的時候就會出問題。

那麼我們一旦遇到這種情況出現 bug 要怎麼解呢？這時候我們可以藉助 vue 提供的 is 屬性來解決這個問題。很簡單， tbody 裡面只能寫 tr, 那我們就都寫 tr，可是實際上我們要顯示 tr 並不是就真的只顯示 tr 空的內容，我們需要顯示 row 元件的內容，那怎麼做？

我們可以在tr 多一個屬性is 讓它等於row, 如下:

#這段程式碼的意思是:我要用一個元件，但是我不能直接寫這個元件，所以我們寫了一個tr, 我們用is 表示雖然我寫的是tr, 但它表示是row 元件，這樣能既能符合H5 的規範又能顯示我們元件的內容，程式就不會有bug 了。

運行結果:

一切正常。

同樣我們使用 ul, select 標籤的時候，也可以用這種方法。

細節二

基礎範例

##我們定義了一個元件row，裡面有段文本，如果我們想把這段文本單獨提取出來用變數表示，那麼你很有可能會這樣寫:

看似完美，在開啟瀏覽器運行你會發現，bug 正向你招手:

主要意思是data 是要一個函數，而不是一個對象，什麼情況，在根組件，也就是最外層vue 的實例，我們透過對象定義是ok 的，但是在非根組件的子組件這樣定義是不行滴。 data 定義要求是一個函數，同時這個函數要求傳回一個對象，如下:

#運行結果:

這樣問題就解決啦。

之所以這麼定義，原因是一個子元件不像根元件只被調用一次，而是可以多次調用，那麼每個子元件的資料我們不希望和其它的子元件產生衝突或說每個子元件都應該有一個自己的資料域，透過函數傳回一個物件就可以實現這個需求。

細節三

基礎範例

#運行，點擊彈出click，沒毛病。 vue 不建議我們在程式碼裡面操作 Dom, 但是在處理一些極其複雜的 動畫效果，我們還真得操作 Dom, 那麼在 vue 中如何操作 Dom 呢？我們可以透過ref 引用的方式，如下:

這時候我們有個需求，就是點擊p 的時候，把裡面的內容印出來，我們可以透過引用來取得p節點，然後列印p 裡面的內容即可:

#運行結果:

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何使用vue中filter

#怎麼用vue判斷dom的class

以上是你必須要注意的vue元件使用細節的詳細內容。更多資訊請關注PHP中文網其他相關文章！