Commonly used component communication methods in Vue

This article will give you a detailed introduction to Vue’s commonly used component communication methods. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

The basic mode of establishing communication: the relationship between parent and child components can be summarized as props are passed downwards and events are passed upwards. The parent component sends data to the child component through props, and the child component sends messages to the parent component through events

Three common ways for component communication

1.props(parent Component passes value to child component)

parent.vue

<template>
  <p>
    <parent-child :childName="childName"></parent-child>
  </p>
</template>

<script>
  import child from "./child"
  export default {
    components: {
      "parent-child" : child
    },data(){
      return {
        childName : "我是child哦"
      }
    }
  }
</script>

child.vue

<template>
  <p id="child">
    child的名字叫:{{childName}}<br>
  </p>
</template>

<script>
  export default {
    props:{
      childName :{
        type:String,
        default: ""
      }
    }
  }
</script>

2.$emit (child component passes value to parent component – ​​local message subscription)

parent.vue

<template>
  <p>
    <parent-child :childName="childName" @childNotify="childReceive"></parent-child>
  </p>
</template>

<script>
  import child from "./child"
  export default {
    components: {
      "parent-child" : child
    },data(){
      return {
        childName : "我是child哦"
      }
    },methods:{
      childReceive(params){
        this.$message(params)
      }
    }
  }
</script>

child.vue

<template>
  <p id="child">
    child的名字叫:{{childName}}<br>
  </p>
</template>

<script>
  export default {
    props:{
      childName :{
        type:String,
        default: ""
      }
    },methods:{
      childNotify(params){
        this.$emit("childNotify","child的名字叫"+this.childName);
      }
    }
  }
</script>

3.bus global message subscription

bus.js

const install = (Vue) => {
  const Bus = new Vue({
    methods: {
      on (event, ...args) {
        this.$on(event, ...args);
      },
      emit (event, callback) {
        this.$emit(event, callback);
      },
      off (event, callback) {
        this.$off(event, callback);
      }
    }
  })
  Vue.prototype.$bus = Bus;
}
export default install;

main. js

import Bus from "./assets/js/bus";
Vue.use(Bus);

child.vue

<template>
  <p id="child">
    child的名字叫:{{childName}}<br>
    <el-button type="primary" @click="brotherNotity">向child2打招呼</el-button>
  </p>
</template>

<script>
  export default {
    props:{
      childName :{
        type:String,
        default: ""
      }
    },methods:{
      childNotify(params){
        this.$emit("childNotify","child的名字叫"+this.childName);
      },
      brotherNotity(){
        this.$bus.$emit("child2","child2你好呀");
      }
    }
  }
</script>

child2.vue

<template>
  <p id="child2">
    child2的名字叫:{{child2Name}}
  </p>
</template>

<script>
  export default {
    props:{
      child2Name :{
        type:String,
        default: ""
      }
    },
    created(){
      this.$bus.$on("child2",function(params){
        this.$message(params)
      })
    },
    beforeDestroy() {
      this.$bus.$off("child2",function(){
        this.$message("child2-bus销毁")
      })
    }
  }
</script>

Recommended learning: vue.js tutorial

The above is the detailed content of Commonly used component communication methods in Vue. For more information, please follow other related articles on the PHP Chinese website!