vue父子傳值與非父子傳值

致愛麗絲發表於2020-09-12
Vue

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

一：父子元件傳值

  1. props方式

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

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

僅適合傳入資料

  1. $parents與$children方式

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

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

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

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

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

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

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

若有需要，推薦使用for...of遍歷子元件例項；

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

  1. $refs與ref方式

用於呼叫子元件的屬性和方法，預設空物件；

最常用；

應該在父元件內給子元件本身新增ref；

this.$refs的意義：該vue例項下的有ref標識的子元件的合集，可以直接通過this.$refs.ref.data/methods來呼叫子元件資料或方法；

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

語法： this.$refs.ref

二：非父子元件傳值

  1. $root： 訪問VUE根元件

略略略

  1. $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繼承了所處函式的上下文環境，妙蛙)

以上

相關文章