vue 區域性回到頂部 12 全域性元件和區域性元件

2021-10-12 20:36:55 字數 2092 閱讀 8363

如何註冊全域性元件;

如果註冊區域性元件;

在標籤上掛載元件。

使用元件的原因:提高**的復用性。如果你不是很理解元件的話,那麼你可以把元件理解為一塊塊的「積木」。

在你用積木搭乙個機械人的時候,那一塊塊的積木,就是乙個個的元件。

vue.component('my-component', )

data: {}})

先說為什麼全域性元件要在 vue 例項之前就註冊好?

上圖中,因為元件的 template 中,就是 h1 標籤,所以會渲染 h1 標籤。

全域性元件有什麼好處呢?

那就是所有的 vue 例項中,都可以使用這個元件。

// bpp 中也使用了 my-component

vue.component('my-component', )

data: {}

})var bpp = new vue(})

頁面渲染:

所謂區域性註冊,就是說在某個 vue 例項中註冊,而不在全域性註冊。那麼同理,區域性註冊的元件,只能在當前 vue 例項中使用。

data: {},

components:

}})渲染效果:

那我們來試試,如果在 bpp 中使用會怎樣?

// bpp 中使用了 my-component

注:報錯資訊沒有擷取全部

有些標籤,它裡邊只能寫特定的標籤,不可以或者不推薦寫其他標籤。

比如:table 中最好就寫 tr、td;ul 和 ol 中只寫 li 標籤。

當然,如果你不遵守這些,瀏覽器仍然可能幫你正確顯示出來,但這樣可能會給瀏覽器增加不必要的負擔。而且,不遵守規範這件事,總歸是不好的。

可如果我們就是要在這些標籤中使用元件呢,從上面的例子來看,在標籤中寫的元件,是長的這個鬼樣子:

這tm是個標籤嗎?

這不是 html 中的標籤,這是我們自定義的標籤,vue 允許我們這麼做。

回到之前那個問題,比如我要在 table 中使用 my-component 咋辦?

如果是像下面這樣寫:

data: {},

components:

}})渲染效果:

乍一看好像沒毛病,可是仔細一看,h2 標籤怎麼跑到 table 標籤外面去了??

因為我們之前說過了,table 標籤裡邊,tm 不能寫 ,只能寫 tr、td、tbody 這種。

所以我們應該像下面這樣:

data: {},

components:

}})渲染效果:

現在,h2 標籤是在 table 標籤之中了。

如果你不理解上面 is 屬性掛載的話,那麼你就這麼理解:

table 裡邊是 tr 沒錯,而 tr 其實 是(is) my-component 元件。

vue中回到頂部

1.回到頂部,使用 scrollintoview 方法 element.scrollintoview方法滾動當前元素,進入瀏覽器的可見區域 該方法可以接受乙個布林值作為引數。如果為true,表示元素的頂部與當前區域的可見部分的頂部對齊 前提是當前區域可滾動 如果為false,表示元素的底部與當前區域...

vue滾動條監聽,定位,回到頂部

在template標籤下,定義乙個div標籤 定義div的樣式,撐起滾動條 classname height 100 position absolute top 0 right 0 bottom 0 left 0 overflow auto 第一種使用id監聽方法 將div標籤改寫成 在mounte...

vue全域性元件和區域性元件

vue元件包括兩種 1 全域性元件,2 區域性元件 區域性元件var 變數名字一定要放在new vue例項外面 1 全域性元件 text align center color red font size 20px margin top 20px 全域性元件直接像上面這樣 註冊 就可以 如果還想註冊繼...