vue父子傳值與非父子傳值

• 2020 年 9 月 12 日
• 筆記
• js, uni-app, VUE

大概梳理下傳值的幾種方式

一：父子組件傳值

1. props方式

子組件對外暴露方法並向父組件傳遞由於觸發方法導致的值的變化，父組件接收子組件傳遞來的值；子組件接收父組件傳遞來的值，並根據傳遞來的值在子組件內部進行各種操作

Tips：子組件只能接受值和發射(狀態)值，父組件不能操作子組件的方法和屬性

僅適合傳入數據

2. $parents與$children方式

可操作父組件或子組件方法及屬性，但不推薦

 1. $parent ： 當前組件樹的根實例，如果沒有則是該組件樹本身

用於子組件獲取父組件實例並操作父組件屬性和方法；

高組件化開發環境下不建議使用，高耦合度，不易復用；

 2. $children:當前實例的 **直屬** 子組件集合

以數組方式存在，數組內子組件成員可能會因為增減組件導致下標發生偏移；

不保證順序，非響應式，僅可拿到子組件下標；

若有需要，推薦使用for…of遍歷子組件實例；

在需要拿到所有子組件時才用到，日常不建議使用；

3. $refs與ref方式

用於調用子組件的屬性和方法，默認空對象；

最常用；

應該在父組件內給子組件本身添加ref；

this.$refs的意義：該vue實例下的有ref標識的子組件的合集，可以直接通過this.$refs.ref.data/methods來調用子組件數據或方法；

為確保子組件完全掛載完畢，應在mounted生命周期內或者使用this.$nextTick()回調來操作子組件的方法或屬性；

語法： this.$refs.ref

二：非父子組件傳值

1. $root： 訪問VUE根組件

略略略

2. $emit 與 $on

該方法可以直接實現兩個頁面間傳值，而不拘泥於是否是父子關係

該方式需要新建一個js文件作為載體， 由該文件對象負責傳遞數據；

// 公共文件 pub.js
import Vue from 'vue'
let pub = new Vue()
export default pub 
//至此，公共文件創建完畢

假設頁面a發送數據，頁面b接收數據：

頁面a，頁面b均需要導入文件pub.js

//頁面a

import Pub from '../utils/public.js'
export default {
      data(){
          pageA:'我是頁面a的數據'
      },
      methods:{
            emitPub(){
		Pub.$emit('goThere',pageA)
	    }
      }
}

//頁面b

import Pub from '../utils/public.js'
export default {
      data(){
          pageB:''
      },
      mounted(){
          //需要在組件載入完畢後使用
          //res： 頁面a發射的數據    
          Pub.$on('goThere',res=>{
            this.pageB = res
          })
      }
}

tips: 經試驗，$on的參數二如果是普通函數，this指向會發生錯誤，因而推薦使用箭頭函數(這是由於箭頭函數下的this繼承了所處函數的上下文環境，妙蛙)

以上