欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 组件间通信

程序员文章站 2024-02-26 22:41:28
...

1、父 ===> 子

//父组件:

<template>
  <div class="sign-up-box">
    <sign-up :banding="true" :ishideBanPage="hideBanPage"></sign-up>
  </div>
</template>

    
<script>
import signUp from "@/views/activity/signUp"; //引入子组件
export default {
  data() {
  },
  components: {
    signUp //注册子组件
  },
  methods: {
    // 定义父组件方法
    hideBanPage() {
      console.log('调用父组件方法')
    }
  }
};
</script>

父组件把变量banding 和方法ishideBanPage 传给子组件,子组件接收变量和方法并调用:

//子组件:

<template>
</template>

<script>
export default {
  props: ["banding", "ishideBanPage"], //用props接收父组件传来的值
  data() {
  },
  mounted() {
    //调用
    console.log( this.banding);
    this.ishideBanPage();
  },
  methods: {
  }
};
</script>

2、子 ===> 父 (以下参考文章:https://segmentfault.com/a/1190000010530600?utm_source=tag-newest

通过$on和$emit方法:

*通过$on,$emit*
**父组件代码**
<template>
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</template>
<script>
    import ButtonCounter from './buttonCounter'
    export default {
        name: 'index',
        components: {
            'button-conuter': ButtonCounter
        },
        data () {
            return {
                total: 0
            }
        },
        methods: {
            incrementTotal () {
                this.total++
            }
        }
    }
</script>
**子组件代码**
<template>
    <button @click="incrementCounter">{{counter}}</button>
</template>
<script>
    export default {
        name: 'button-counter',
        data () {
            return {
                counter: 0
            }
        },
        metheds: {
            incrementCounter () {
                this.$emit('increment')
                this.counter++
            }
        }
    }
</script>

 

3、 非父子:(以下方法请教同事嘉伟)

简单情况下我们可以通过使用一个空的Vue实例作为*事件总线,(这里也可以使用app实例,而不需要新建一个空Vue实例)

**main.js**
let bus = new Vue()
Vue.prototype.bus = bus
//组件A
<template>
  <div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
    }
  },
  beforeDestroy() {
    //为了确保另一个组件中能够收到信息,信息从beforeDestroy里发送
    this.bus.$emit('userMsg', 'hi'); //向另一个组件发送信息
  }
}
</script>
//组件B
<template>
  <div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
    }
  },
  created() {
    //接收信息
    this.bus.$on('userMsg', function(msg) {
        console.log(msg) // hi
    })
  },
  beforeDestroy() {
    //销毁
    this.bus.$off('userMsg')
  }
}
</script>