Vue非父组件之间的通信

最新推荐文章于 2024-06-03 22:04:47 发布

龟霸也是高达

最新推荐文章于 2024-06-03 22:04:47 发布

阅读量81

点赞数

分类专栏： JavaScript vue 文章标签： vue

本文链接：https://blog.csdn.net/MS6324_ZAKU/article/details/109220980

版权

JavaScript 同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

vue

18 篇文章 0 订阅

订阅专栏

Vue非父组件之间的通信

假设子组件A向子组件B传递信息

现在Vue实例中的data中设置名为bus 的Vue实例中介.
子组件A在设置监听事件,并设置方法,
子组件A的方法为(假设点击事件),通过$root.bus.emit()提交当前的信息给子组件B的自定义事件
子组件B通过声明周期钩子,通过created,在实例刚创建的时候,监听这个函数,通过$root.bus.$on('自定义事件',function(value){})接收一个子组件A的参数value

通过公共的Vue实例bus

总而言之

子组件A用$root.bus.emit('自定义事件',value)传出数据
子组件B用$root.bus.$on('自定义事件',function(value){})接收数据

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div id="app">
    <a-component></a-component>
    <b-component></b-component>
    
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    Vue.component('a-component',{
      template:`<button @click='handle'>点击传递值</button>`,
      data(){
        return{
          aaa:'我是来自a的内容'
        }
      },
      methods:{
        handle(){
          this.$root.bus.$emit('lalala',this.aaa)
        }
      }
    })
                  
                  
    Vue.component('b-component',{
      template:`<div>{{count}}</div>`,
      created:function(){
        this.$root.bus.$on('lalala',function(value){
          alert(value)
          console.log(this)
        })
      }

      ,
      data(){
        return{
          count:0
        }
      }

    })
                                             
    const app = new Vue({
      el:"#app",
      data:{
       bus: new Vue()
      }
    })
  </script>
</body>

</html>

结果

点击子组件B按钮获得子组件A中的值

龟霸也是高达

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue非父组件之间的通信

Vue非父组件之间的通信假设子组件A向子组件B传递信息现在Vue实例中的data中设置名为bus 的Vue实例中介.子组件A在设置监听事件,并设置方法,子组件A的方法为(假设点击事件),通过$root.bus.emit()提交当前的信息给子组件B的自定义事件子组件B通过声明周期钩子,通过created,在实例刚创建的时候,监听这个函数,通过$root.bus.$on('自定义事件',function(value){})接收一个子组件A的参数value通过公共的Vue实例bus总而言之子
复制链接

扫一扫

专栏目录