非父子元件之間實現錨點功能

2021-10-12 04:48:14 字數 899 閱讀 8047

一、兩個vue檔案(非父子元件)之間實現錨點功能

問題描述:在乙個vue頁面中,引入兩個元件,a元件是頭部的導航欄,b元件是展示的頁面內容,我要通過a元件的乙個按鈕觸發狀態,然後b元件根據a元件觸發的狀態跳轉到頁面相應的位置, 一開始我想到的是用a標籤的href屬性來實現錨點的功能,但是使用a標籤會導致頁面重新整理,並且url欄會加上相應的錨點『#id』。

解決方法:

2. 經過上網查詢解決方案,並結合實際情況,使用localstorage來解決。

解決方案:

1). 首先在main.js中給vue.prototype註冊乙個全域性方法,然後建立乙個 storageevent 方法,當執行localstorage.setitem(k, val) 的時候,初始化事件並派發事件。

storageevent:當前頁面使用的storage被其他頁面修改時觸發;

createevent(type):這個方法返回乙個新的dom事件物件,事件型別為傳入的type。

vue.prototype.

$addstorageevent

=function

(key, data)

}return storage.

setitem

(key, data)

;}

2)a元件的按鈕觸發的事件中進行快取

`this.$addstorageevent("id", data);`

b元件中監聽setitem

window.

addeventlistener

('setitem'

,(e)

=>

);

兩個vue檔案之間實現錨點的效果就實現了。

Vue父子元件之間和非父子元件之間傳值

父元件呼叫子元件的時候,繫結動態屬性 title v header 在子元件裡面通過props接收父元件傳過來的資料,props title 或者 props 直接在子元件中使用 呼叫子元件的時候定義乙個ref header v header 在父元件中通過 this refs.header.屬性 ...

vue的父子元件以及非父子元件之間的通訊方式

父傳子 prop 自定義屬性,將父親的資料傳給兒子 1.在元件標籤上使用自定屬性 2.在元件內部通過props來接收自定義屬性 3.子元件接收後既可以在元件裡直接使用,不過只能用不能改 父元件 子元件 這裡是元件 子傳父 emit emit 可以觸發繫結在元件身上自定義事件 1.在父元件中的子元件標...

Vue 非父子元件之間的通訊

實現非父子元件之間的通訊,有以下幾種方式 第一種是最常用的,此處只介紹第一種。bus匯流排實現非父子元件之間的通訊 div id div script 建立乙個空的vue物件作為bus 事件匯流排 vue.prototype.bus new vue vue.component myheader vu...