vue3中非父子組件如何傳值

小編給大家分享一下vue3中非父子組件如何傳值，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

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

App.vue

<template>
  <div >
    <h2>我是你爹</h2>
    <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>
  <h3>我是一級子組件</h3>
  <span>????</span>
  <sub2/>
</template>
<script>
  import sub2 from "./sub2";
	export default {
		name: "sub1",
    components:{
			sub2,
    }
	}
</script>
<style scoped>
</style>

sub2.vue

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

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

但是也會出現問題：

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

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

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

<template>
  <div >
    <h2>我是你爹</h2>
    <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 >
    <h2>我是你爹</h2>
    <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>

看完了這篇文章，相信你對“vue3中非父子組件如何傳值”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！