這次帶給大家你必須要注意的vue組件使用細節，vue組件使用細節的注意事項有哪些，下面就是實戰案例，一起來看一下。
細節一
基礎範例
執行結果:
以上大家都懂，這邊就不多說，回到程式碼裡，有時候我們需要tbody 裡面每一行是一個子元件，那我們程式碼可以怎麼寫呢？我們可以這樣寫，定義一個全域元件，如下：
然後我們在body 裡面可以這麼呼叫:
運行結果:
可以看到row 是有列印出來了，但它其實裡面沒有任務內容，那我們的問題出在哪裡？回到程式碼我們發現我們在創建vue 實例的時候沒有指定要掛載的點，所以我們透過el 來指定vue 接管的Dom ,如下:
同樣我們使用 ul, select 標籤的時候，也可以用這種方法。
細節二
基礎範例
##我們定義了一個元件row，裡面有段文本，如果我們想把這段文本單獨提取出來用變數表示，那麼你很有可能會這樣寫:
看似完美，在開啟瀏覽器運行你會發現，bug 正向你招手:
主要意思是data 是要一個函數，而不是一個對象，什麼情況，在根組件，也就是最外層vue 的實例，我們透過對象定義是ok 的，但是在非根組件的子組件這樣定義是不行滴。 data 定義要求是一個函數，同時這個函數要求傳回一個對象，如下:
#運行結果:
這樣問題就解決啦。
之所以這麼定義，原因是一個子元件不像根元件只被調用一次，而是可以多次調用，那麼每個子元件的資料我們不希望和其它的子元件產生衝突或說每個子元件都應該有一個自己的資料域，透過函數傳回一個物件就可以實現這個需求。
細節三
基礎範例
#運行，點擊彈出click，沒毛病。 vue 不建議我們在程式碼裡面操作 Dom, 但是在處理一些極其複雜的 動畫效果，我們還真得操作 Dom, 那麼在 vue 中如何操作 Dom 呢？我們可以透過ref 引用的方式，如下:
這時候我們有個需求，就是點擊p 的時候，把裡面的內容印出來，我們可以透過引用來取得p節點，然後列印p 裡面的內容即可:
#運行結果:
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是你必須要注意的vue元件使用細節的詳細內容。更多資訊請關注PHP中文網其他相關文章！
