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

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>我是一級子組件</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>我引用了頂級組件的names數組 ===> {{names}}</div>
</template>
<script>
	export default {
		name: "sub2",
    // 通過inject  在子組件中接受某一個跨級傳遞的值
    inject:['names'],
	}
</script>
<style scoped>
</style>

實現效果如下，可以看到是可以正常獲取頂級組件中傳遞的值：

在這里插入圖片描述

但是也會出現問題：

就是頂級組件要傳遞的值變化時，如何讓它實現響應式呢？

如何在provide屬性中通過this獲取當前的實例呢？

這里就需要將provide屬性書寫為方法的形式，返回一個數組或者對象：

<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的   此時的this只想script內的作用域   this為undefined*/
    /*provide:{
			this.names,
    }*/
  //  應該這樣寫
    provide(){
    	return {
    		names:this.names
      }
    }
	}
</script>
<style scoped>
</style>

像上面這樣寫，雖然可以拿到this指向的實例下的數據，但是如何讓它們形成依賴關系，實現響應式呢？對此我們需要對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的   此時的this只想script內的作用域   this為undefined*/
    /*provide:{
			this.names,
    }*/
  //  應該這樣寫
    provide(){
    	return {
    		names:computed(() =>{ this.names.length }) // 使用計算屬性返回該變量   使得names與data中的names形成依賴關系
      }
    },
    mounted() {
    	setInterval(()=>{
    		this.names.push('vue大王！')
      },1000)
    }
	}
</script>
<style scoped>
</style>