组件间通信（跨组件传值--依赖注入和消息订阅与发布）----第三节

之前已经对父子之间的传值有了一定了解了，但是遇到了组件和孙组件传值，我们按照父子组件之间传递下来是这样的，我们需要依次传递给子组件，然后子组件在传递给孙组件，这样造成了子组件的沉余，代码所示；

   

 需要子组件props接收之后随后传递给子组件标签，然后孙组件props接收到之后在进行使用

<template>
  <div>
      <h1>我是孙组件：祖组件传递过来的值是：{{toStongMsg}}</h1>
  </div>
</template>

<script>
export default {
    props:{
        toStongMsg:String
    }
}
</script>

 这样传值也行，但是如果组件嵌套的足够深，并且传值足够多，这样的话会扰乱我们的代码，代码过于臃肿，而且会使用我们混乱，所以接下来我要讲的是通过依赖注入来解决这个问题

首先我们在父组件字面提供出去一个数据，而后后代组件使用

<template>
  <div>
    <h1>我是父组件</h1>
    <SonComp/>
  </div>
</template>

<script>
import { ref , provide} from 'vue'
import SonComp from './Hightpom.vue'
export default {
  components:{SonComp},
  provide(){
    return {
      msg:this.msg
    }
  },
  setup(props) {
    let msg=ref('这是传递给孙组件的值')
    
    return{
      msg
    }
  },
}
</script>

然后孙组件在接收的使用注入进来就可以使用了

<template>
  <div>
      <h1>我是孙组件祖组件传递过来的字符串是：{{msg}}</h1>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
    inject:['msg'],
}
</script>

在页面上显示：

 只适用于组件向后代组件进行传值，

在setup语法糖使用的话，provide有两个参数，相当于是key，value的形式，第二个参数是要传的之，后代在注入的时候可以直接写一个变量来接收，此时inject是个函数，然后再模板里面直接用变量写就行了。

再说一下消息订阅与发布，它是个插件，跨组件使用，不管是父组件，孙组件，还是其它组件之间的传值，

首先安装插件   npm i pubsub-js

安装好了接下来我们来运用，组件间都一样，不存在父子，后代关系

就演示孙组件向祖组件传值，

首先我们再要传值和接收的地方引入  import pubsub from 'pubsub-js

在孙组件里面通过函数发布出去，第一个参数是名字，第二个参数是值，

<template>
  <div>
      <button @click="pushvalue">我是孙组件发布值出去</button>
  </div>
</template>

<script>
import { inject } from 'vue'
import pubsub from 'pubsub-js'
export default {
    inject:['msg'],
    data() {
        let subvalue='订阅了SubValue发布的消息是，666'
        return {
            subvalue
        }
    },
    methods: {
        pushvalue(){
            pubsub.publish('SubValueq',this.subvalue)
        }
    },
}
</script>

第一个参数是名字，第二个参数才是数据

<template>
  <div>
    <h1>我是父组件,接收到孙组件传过来的值是：{{msg}}</h1>
    <SonComp/>
  </div>
</template>

<script>
import SonComp from './Hightpom.vue'
import pubsub from 'pubsub-js'
export default {
  components:{SonComp},
  mounted() {
    pubsub.subscribe('SubValueq',(SubName,Subdata)=>{
      this.msg=Subdata
    })
  },
  data() {
    let msg=''
    return{
      msg,
    }
  },
}
</script>