這篇文章給大家介紹使用vue組件時需要注意哪些問題，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

蘄春ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

細節(jié)一

基礎(chǔ)例子

運行結(jié)果:

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

然后我們在 body 里面可以這么調(diào)用:

運行結(jié)果:

可以看到 row 是有打印出來了，但它實際上里面沒有任務(wù)內(nèi)容，那我們的問題出在哪呢？回到代碼我們發(fā)現(xiàn)我們在創(chuàng)建 vue 實例的時候沒有指定要掛載的點，所以我們通過 el 來指定 vue 接管的 Dom ,如下:

運行結(jié)果:

感覺上沒有問題，但真的是這樣嗎？我們通過檢查元素，查看DOM結(jié)構(gòu):

大家可以看到出錯啦？正常的三個 tr 應(yīng)該是在 tbody 里面， 而現(xiàn)在跑到跟 tbody 同一層了，這是怎么回事呢？

在H5的規(guī)范里面，要求我們 table 里面有 tbody, tbody 里面必須得放 tr,而現(xiàn)在我們使用子組件里面寫成 row, 所以我們的瀏覽器在解析的時候就會出問題。

那么我們一旦遇到這種情況出現(xiàn) bug 要怎么解呢？ 這時候我們可以借助 vue 提供的 is 屬性來解決這個問題。很簡單， tbody 里面只能寫 tr, 那我們就都寫 tr，可是實際上我們要顯示 tr 并不是就真的只顯示 tr 空的內(nèi)容，我們需要顯示 row 組件的內(nèi)容，那怎么做？

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

這段代碼的意思是:我要用一個組件，但是我不能直接寫這個組件，所以我們寫了一個 tr, 我們用 is 表示雖然我寫的是 tr, 但它表示是 row 組件，這樣能既能符合 H5 的規(guī)范又能顯示我們組件的內(nèi)容 ，程序就不會有 bug 了。

運行結(jié)果:

一切正常。

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

細節(jié)二

基礎(chǔ)例子

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

看似完美，在打開瀏覽器運行你會發(fā)現(xiàn)，bug 正向你招手:

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

運行結(jié)果:

這樣問題就解決啦。

之所以這么定義，原因是一個子組件不像根組件只被調(diào)用一次，而是可以多次調(diào)用，那么每一個子組件的數(shù)據(jù)我們不希望和其它的子組件產(chǎn)生沖突或者說每個子組件都應(yīng)該有一個自己的數(shù)據(jù)域，通過函數(shù)返回一個對象就可以實現(xiàn)這個需求。

細節(jié)三

基礎(chǔ)例子

運行，點擊彈出click，沒毛病。vue 不建議我們在代碼里面操作 Dom, 但是在處理一些極其復(fù)雜的動畫效果，我們還真得操作 Dom, 那么在 vue 中如何操作 Dom 呢？ 我們可以通過 ref 引用的方式，如下:

這時候我們有個需求，就是點擊div 的時候，把里面的內(nèi)容打印出來，我們可以通過引用獲取div節(jié)點，然后打印div 里面的內(nèi)容即可:

運行結(jié)果:

關(guān)于使用vue組件時需要注意哪些問題就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享題目：使用vue組件時需要注意哪些問題
文章源于：http://aaarwkj.com/article10/igihgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、小程序開發(fā)、App開發(fā)、網(wǎng)站策劃、網(wǎng)站制作、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)