vue元件傳參

2022-01-22 07:05:42 字數 2584 閱讀 3327

負值元件的定義有兩種,我稱為常規父子元件和特殊父子元件。

1.1、常規父子元件

將其他元件以import引入用自定義標籤接收,在當前元件中component裡註冊該標籤,頁面上可以直接用《自定義標籤》引入子元件

註冊子元件

使用子元件

1.2、特殊父子元件

在路由中定義好元件,元件中含有children,頁面上通過形式使用,也算是父子元件,當前元件為父元件,router-view路由的為子元件。

在main.vue中引入

當前的main.vue為父元件,router-view引入的container.vue為子元件。

2.1、常規父元件傳參到子元件

在main.vue父元件上的資料和方法:

在main.vue父元件上傳遞資料和方法:

在header.vue子元件上引入父元件傳遞過勞的資料和方法:

在header.vue子元件上使用父元件傳遞的資料和方法:

2.1、特殊父元件傳參到子元件

在main.vue父元件基本同上,區別在於傳遞父元件的方法函式時使用「v-on:」或」@「,而不是用「:「 

在container.vue子元件上基本相同,區別在於接受父元件傳遞過來的方法函式不使用props,通過在methods中通過定義乙個新方法,在方法體裡面寫this.$emit(『testrouter』,』val』),以這種形式獲取父元件的方法,在賦值給子元件新定義的方法,注意alert1是父元件中繫結時候自己定義的名字,val若該方法帶引數則加上,不帶則加空字串即可。

3.1、常規的子元件傳遞資料和方法到父元件中

(1)傳遞資料:子元件主要通過事件傳遞資料給父元件

子元件定義乙個方法,方法中通過this.$emit(『transfernum』,this.num)方式傳送資料num,父元件中監聽transfernum事件,當事件觸發時,執行函式,進行賦值。

子元件的資料和傳送資料方法:

父元件中監聽子元件中傳送函式的方法,並賦值。

這樣在父元件中就可以使用data中的num這個資料了。

(2)傳遞方法:子元件定義好方法,父元件在引用子元件的時候在自定義標籤中新增識別符號,ref=」child1」,用來表示這個子元件。父元件在methods中定義自己的方法名,方法主體:this.$refs.child1.fun。意思是通過呼叫$refs中名字叫child1的子元件裡的fun方法,賦值給父元件。

子元件定義方法:

父元件中引用子元件時,新增乙個識別符號rel=』abc』,注意rel是語法,abc是標識

父元件中定義乙個方法,主體內容如圖,表示方法就是標識為aaa的子元件裡的setfun方法。

呼叫gerfun方法

3.2、特殊的子元件傳遞資料和方法到父元件中

經過測試,特殊的子元件傳遞資料和方法到父元件中與普通的子元件傳遞資料和方法到父元件中是一樣的。

4.1 兄弟元件引入

兩個元件作為子元件被同乙個父元件所引用

4.2、main.js裡的設定

4.3、兩個兄弟元件之間的語法

元件header.vue需要定義乙個傳送資料的方法,此處sendmsg是定義在此的方法,頁面點選時候觸發此函式,函式主體,通過bus**事件匯流排用$emit傳送乙個send事件,事件的功能就是傳送乙個「hello world!」的資料,區分sendmsg和send,前者是當前頁面的點選事件,後者是傳送出去,需要其他元件監聽的事件。

元件copy.vue中,在生命週期為created的時候,通過bus**事件匯流排用$on監聽元件1中傳送的send事件,用乙個帶引數的**函式,接收穿過來的值,引數即為傳的值 ,把值賦值給當前元件的變數。

兄弟元件間就不互相呼叫對方的方法了,多次使用的話就單獨封裝成乙個方法在獨立的js格式檔案中,到時直接呼叫。

主要參照部落格:感謝原博主

vue 元件傳參

我們通常把路由直接對映 繫結 的元件稱為 路由元件,也只有路由元件才能直接呼叫路由有關物件 router route 當我們乙個元件即希望作為路由元件使用,又可能作為功能元件 某個頁面中的一部分 去使用,這個時候路由元件傳參的方式來做到這點 1.父元件向子元件傳遞引數 還可以傳遞函式 props 父...

Vue元件傳參

通常,父元件的模板中包含子元件,父元件要正向地向子元件傳遞資料或引數,子元件收到後根據引數的不同來渲染不同的內容,或者執行操作。這個正向傳遞資料的過程是通過props來實現的。在元件中,子元件使用props來宣告需要從父元件接受的資料。但是父元件不能向子元件傳遞資料。需要注意的是 在 js中物件和陣...

vue傳參,元件之間傳參 路由傳參 vuex

詳見 兩種情況 params 和 query 都可以在目標元件的生命週期裡,通過 this.route 進行獲取 例 首頁中精選主題的路由傳參 精選主題 1 簡單舉例 a 一般會新建 store 資料夾,在 index.js 初始化 vuex b 在 main.js 中,引入 c 例如,在我的頁面修...