zoukankan      html  css  js  c++  java
  • vue2.0非父子间进行通讯

    在vue中,父组件向之组件通讯使用的是props,子组件向父组件通讯使用的是$emit+事件,那非父子间的通讯呢,在官方文档上只有寥寥数笔,

    概念很模糊,这个空的vue实例应该放在哪里呢,光放文档并没有明确的描述,经过查证一些其他的资料,发现其实这个非父子间的通讯是这么用的:

    首先,这个空的实例需要放到根组件下,所有的子组件都能调用,即放在main.js下面,如图所示:

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    
    Vue.config.productionTip = false;
    
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      data:{
        Hub:new Vue()
      },
      template: '<App/>',
      components: { App }
    });
    

      我的两个组件分别叫做child1.vue,child2.vue,我现在想点击child1.vue里面的按钮来改变child2.vue里面的数值,这个时候我们需要借助一个$root的工具来实现:

    child1.vue:

    <template lang="pug">
      div this is child
        span(@click="correspond") 点击进行非组件之间的通信
    </template>
    <script>
      export default{
        methods: {
          correspond(){
              this.$root.Hub.$emit("change","改变")
          }
    
        }
      }
    </script>
    

      

    child2.vue:

    <template lang="pug">
      div this is child2
        span {{message}}
    </template>
    <script>
      export default{
        data(){
          return {
            message: "初始值"
          }
        },
        created(){
          this.$root.Hub.$on("change", () => {
            this.message = "改变"
          })
        }
      }
    </script>
    

      

    此时就已经可以达到我们想要的效果啦。

  • 相关阅读:
    [51nod1474]宝藏图
    web h5常用代码总结
    ionic app 热更新
    ionic3——ion-scroll无法使用scrollTo的问题
    git操作
    uniapp开发
    uniapp 之navigateTo:fail page 跳转路径不对
    微信小程序之登录用户不是该小程序的开发者
    ionic slide组件使用
    ionic使用自定义icon
  • 原文地址:https://www.cnblogs.com/mmykdbc/p/8124566.html
Copyright © 2011-2022 走看看