vue3跨层级通信

常用的方法就不写了，主要分享下provide/inject（提供/注入）的方法
可以实现跨层组件（祖孙）间通信，不需要将数据一层一层向下传递

//父组件 Father.vue<template><son></son></template><script>import{ defineComponent, reactive, provide, computed}from"vue";import sonfrom"@/components/Son";exportdefaultdefineComponent({
  components:{
    son},setup(){let params=reactive({
      name:"来自父亲的参数"})provide("name",computed(()=> params.name));//用计算属性返回值能够动态传递来子/孙组件（当子孙组件通过方法触发修改name值时）functionchangeName(val){
     params.name= val;//子孙组件触发}provide("changeName",changeName);}})</script>

//儿子组件 Son.vue<template><h2>{{ name}}</h2><button @click="changeName('儿子组件触发')">儿子组件触发Name修改</button><divclass="grandson"><grandson></grandson></div></template><script>import grandsonfrom"@/components/grandson";import{ defineComponent, inject}from"vue";exportdefaultdefineComponent({
  components:{ grandson},setup(){let name=inject("name");//接收Father组件传来的namelet changeName=inject("changeName");//接收方法return{
      name,
      changeName,};},});</script>

//孙子组件 grandson.vue<template><h2>{{ name}}</h2><button @click="changeName('孙子组件触发')">孙子组件触发Name修改</button></template><script>import{ defineComponent, inject, watch}from"vue";exportdefaultdefineComponent({
  name:"HelloWorld",setup(){let name=inject("name");let changeName=inject("changeName");watch(name,(newValue,oldValue)=>{//这里可以监听name的变化})return{
      name,
      changeName,};},});</script>

子孙组件都接收到Father组件传来的参数"来自Father组件的参数"。
当点击儿子组件或者孙子组件按钮时，触发changeName事件在Father组件上name值也会改变。