快捷導(dǎo)航

詳解vue3中的非父子組件傳值

更新時(shí)間：2021年12月28日 08:43:05 作者：高級(jí)白嫖工程師

這篇文章主要為大家介紹了vue3中的非父子組件傳值，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

vue2中非父子組件的傳值主要是通過事件總線，創(chuàng)建一個(gè)vue實(shí)例，通過在不同的組件中導(dǎo)入該實(shí)例來(lái)實(shí)現(xiàn)非父子組件之間的通信行為。
vue3提供了**provide**和**inject**屬性，可以實(shí)現(xiàn)非父子組件之間的通信；
假設(shè)有三個(gè)組件：App.vue(父級(jí))、sub1(子級(jí))、sub2(子級(jí)的子級(jí))：

App.vue

<template>
  <div style="border: 1px solid pink">
    <h1>我是你爹</h1>
    <span>??</span>
    <sub1/>
  </div>
</template>
<script>
  import sub1 from './sub1'
	export default {
		name: "App",
    components:{
			sub1,
    },
    provide:{ // 通過在父組件中定義provide   聲明要傳遞的值
			names:['peanut','javascriptKing']
    }
	}
</script>
<style scoped>
</style>

sub1.vue

<template>
  <h2>我是一級(jí)子組件</h2>
  <span>??</span>
  <sub2/>
</template>
<script>
  import sub2 from "./sub2";
	export default {
		name: "sub1",
    components:{
			sub2,
    }
	}
</script>
<style scoped>
</style>

sub2.vue

<template>
  <h3>我是最小的，也就是孫子</h3>
  <div>我引用了頂級(jí)組件的names數(shù)組 ===> {{names}}</div>
</template>
<script>
	export default {
		name: "sub2",
    // 通過inject  在子組件中接受某一個(gè)跨級(jí)傳遞的值
    inject:['names'],
	}
</script>
<style scoped>
</style>

實(shí)現(xiàn)效果如下，可以看到是可以正常獲取頂級(jí)組件中傳遞的值：

在這里插入圖片描述

但是也會(huì)出現(xiàn)問題：

就是頂級(jí)組件要傳遞的值變化時(shí)，如何讓它實(shí)現(xiàn)響應(yīng)式呢？

如何在provide屬性中通過this獲取當(dāng)前的實(shí)例呢？

這里就需要將provide屬性書寫為方法的形式，返回一個(gè)數(shù)組或者對(duì)象：

<template>
  <div style="border: 1px solid pink">
    <h1>我是你爹</h1>
    <span>??</span>
    <sub1/>
  </div>
</template>
<script>
  import sub1 from './sub1'
	export default {
		name: "App",
    data(){
			return {
				names:['peanut','javascriptKing']
      }
    },
    components:{
			sub1,
    },
    /*這樣寫是拿不到this的   此時(shí)的this只想script內(nèi)的作用域   this為undefined*/
    /*provide:{
			this.names,
    }*/
  //  應(yīng)該這樣寫
    provide(){
    	return {
    		names:this.names
      }
    }
	}
</script>
<style scoped>
</style>

像上面這樣寫，雖然可以拿到this指向的實(shí)例下的數(shù)據(jù)，但是如何讓它們形成依賴關(guān)系，實(shí)現(xiàn)響應(yīng)式呢？對(duì)此我們需要對(duì)App.vue做如下的修改：

<template>
  <div style="border: 1px solid pink">
    <h1>我是你爹</h1>
    <span>??</span>
    <sub1/>
  </div>
</template>
<script>
  import sub1 from './sub1'
  import { computed } from 'vue'
	export default {
		name: "App",
    data(){
			return {
				names:['peanut','javascriptKing']
      }
    },
    components:{
			sub1,
    },
    /*這樣寫是拿不到this的   此時(shí)的this只想script內(nèi)的作用域   this為undefined*/
    /*provide:{
			this.names,
    }*/
  //  應(yīng)該這樣寫
    provide(){
    	return {
    		names:computed(() =>{ this.names.length }) // 使用計(jì)算屬性返回該變量   使得names與data中的names形成依賴關(guān)系
      }
    },
    mounted() {
    	setInterval(()=>{
    		this.names.push('vue大王！')
      },1000)
    }
	}
</script>
<style scoped>
</style>