1. 程式人生 > >vue組件傳參

vue組件傳參

技術分享 -s http 感謝 ans send ger creat end

一、父子組件的定義

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

  1.1、常規父子組件

  將其他組件以import引入用自定義標簽接收,在當前組件中component裏註冊該標簽,頁面上可以直接用<自定義標簽></自定義標簽>樣子使用。當前組件為父組件,被引入的組件為子組件。

  引入子組件技術分享圖片

  註冊子組件技術分享圖片

  使用子組件技術分享圖片

  1.2、特殊父子組件

  在路由中定義好組件,組件中含有children,頁面上通過<router-view></router-view>形式使用,也算是父子組件,當前組件為父組件,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格式文件中,到時直接調用。

主要參照博客:https://blog.csdn.net/a15088712506/article/details/78967937,感謝原博主

vue組件傳參