12 types of component communications in Vue2

1. props
2..sync
3.v-model
4.ref
5. $emit/v-on
6. $attrs/$listeners
7.$children/$parent
8.provide/inject
9.EventBus
10. Vuex
11.$root
12. slot

The following lists the writing methods of each component communication method one by one

1. Props

The parent component transmits data to the child component, which should be the most commonly used method. After the child component receives the data, it cannot directly modify the parent component's data. will report an error, so when the parent component re-renders, the data will be overwritten. If you want to modify the subcomponent, it is recommended to use computed

// Parent.vue transfers <template>
    <child :msg="msg"></child>
</template>

// Child.vue receives export default {
  //Writing method 1: Use array to receive props:['msg'],
  // Writing method 2: Use object to receive, you can limit the received data type, set default value, verify, etc. props:{
      msg:{
          type:String,
          default: 'This is the default data'
      }
  },
  mounted(){
      console.log(this.msg)
  },
}

2. .sync

It can help us realize the two-way binding of data passed from parent component to child component, so the child component can modify the data directly after receiving it, and will also modify the data of the parent component at the same time

// Parent.vue
<template>
    <child :page.sync="page"></child>
</template>
<script>
export default {
    data(){
        return {
            page:1
        }
    }
}

// Child.vue
export default {
    props:["page"],
    computed(){
        // When we modify currentPage in the child component, the parent component's page will also change currentPage {
            get(){
                return this.page
            },
            set(newVal){
                this.$emit("update:page", newVal)
            }
        }
    }
}
</script>

3. v-model

Similar to .sync , it can realize two-way binding of data from parent component to child component, and child component can modify the data of parent component through $emit

// Parent.vue
<template>
    <child v-model="value"></child>
</template>
<script>
export default {
    data(){
        return {
            value:1
        }
    }
}

// Child.vue
<template>
    <input :value="value" @input="handlerChange">
</template>
export default {
    props:["value"],
    // You can modify the event name, the default is input
    model:{
        event:"updateValue"
    },
    methods:{
        handlerChange(e){
            this.$emit("input", e.target.value)
            // If there is a rename above, it will be like this.$emit("updateValue", e.target.value)
        }
    }
}
</script>

4. ref

If ref is on a normal DOM element, the reference points to that DOM element;
If the reference is to the child component instance, the parent component can actively obtain the child component's properties or call the child component's methods through ref

// Child.vue
export default {
    data(){
        return {
            name:"Muhua"
        }
    },
    methods:{
        someMethod(msg){
            console.log(msg)
        }
    }
}

// Parent.vue
<template>
    <child ref="child"></child>
</template>
<script>
export default {
    mounted(){
        const child = this.$refs.child
        console.log(child.name) // Muhuachild.someMethod("The method of the child component is called")
    }
}
</script>

5. $emit / v-on

Child components send data to parent components by dispatching events, or trigger parent component updates and other operations

// Child.vue dispatch export default {
  data(){
      return { msg: "This is the message sent to the parent component" }
  },
  methods: {
      handleClick(){
          this.$emit("sendMsg",this.msg)
      }
  },
}
// Parent.vue responds to <template>
    <child v-on:sendMsg="getChildMsg"></child>
    // or abbreviated <child @sendMsg="getChildMsg"></child>
</template>

export default {
    methods:{
        getChildMsg(msg){
            console.log(msg) // This is the message received by the parent component}
    }
}

6. $attrs / $listeners

When multiple layers of nested components pass data, this can be used if you only want to pass data without doing any intermediate processing, such as when a parent component passes data to a grandchild component.
$attrs: Contains a collection of non- props attributes in the parent scope except class and style . Get all qualified attribute sets in the parent scope through this.$attrs , and then pass them to other components in the child component through v-bind="$attrs"

$listeners: Contains a collection of listener events in the parent scope except native . If you want to continue passing it to other components inside the child component, you can use v- on="$linteners"

The usage is the same

// Parent.vue
<template>
    <child :name="name" title="1111" ></child>
</template
export default{
    data(){
        return {
            name:"Muhua"
        }
    }
}

// Child.vue
<template>
    // Continue passing to grandchild component <sun-child v-bind="$attrs"></sun-child>
</template>
export default{
    props:["name"], // This can be received or not received mounted(){
        // If props receives name, it is { title:1111 }, otherwise it is { name:"Muhua", title:1111 }
        console.log(this.$attrs)
    }
}

7. $children / $parent

$children: Get an array of VueComponent objects containing all child components (excluding grandchild components), and you can directly get all the data and methods in the child components.
$parent: Gets a VueComponent object of a parent node, which also contains all the data and methods in the parent node.

// Parent.vue
export default{
    mounted(){
        this.$children[0].someMethod() // Call the method of the first child component this.$children[0].name // Get the properties of the first child component }
}

// Child.vue
export default{
    mounted(){
        this.$parent.someMethod() //Call the method of the parent component this.$parent.name //Get the properties in the parent component}
}

8. provide / inject

provide / inject is dependency injection. It is not recommended to use it directly in application code, but it is commonly used in some plug-ins or component libraries, so I think it is okay to use it. It is quite useful.

Provide: allows us to specify the data or methods we want to provide to descendant components
inject: Receive the data or methods you want to add to this component in any descendant component, no matter how deeply the component is nested, you can use it directly

It should be noted that the data passed by provide and inject are not responsive, that is, after receiving data with inject , if the data in provide changes, the data in the descendant components will not change, unless the passed in object is a listenable object. Therefore, it is recommended to pass some constants or methods.

// Parent component export default{
    // Method 1 cannot obtain the method in methods provide:{
        name:"Muhua",
        age: property in this.data},
    // Method 2 cannot obtain the attributes in data provide(){
        return {
            name:"Muhua",
            someMethod:this.someMethod // method in methods }
    },
    methods:{
        someMethod(){
            console.log("This is the injection method")
        }
    }
}

// Descendant component export default{
    inject:["name","someMethod"],
    mounted(){
        console.log(this.name)
        this.someMethod()
    }
}

9. EventBus

EventBus is the central event bus. Whether it is a parent-child component, a sibling component, or a cross-level component, it can be used to complete communication operations. There are three ways to define it.

/Method 1:

// Extract it into a separate js file Bus.js, and then import it where needed // Bus.js
import Vue from "vue"
export default new Vue()

Method 2: Mount directly to the global

// main.js
import Vue from "vue"
Vue.prototype.$bus = new Vue()

Method 3: Inject into the Vue root object

// main.js
import Vue from "vue"
new Vue({
    el:"#app",
    data:{
        Bus: new Vue()
    }
})

The usage is as follows, taking method 1 as an example to introduce on demand

// In the component that needs to send custom events to the outside <template>
    <button @click="handlerClick">Button</button>
</template>
import Bus from "./Bus.js"
export default{
    methods:{
        handlerClick(){
            // Custom event name sendMsg
            Bus.$emit("sendMsg", "This is the data to be sent to the outside")
        }
    }
}

// Import Bus from "./Bus.js" in the component that needs to receive external events
export default{
    mounted(){
        // Listen for event triggering Bus.$on("sendMsg", data => {
            console.log("This is the received data:", data)
        })
    },
    beforeDestroy(){
        //Cancel monitoring Bus.$off("sendMsg")
    }
}

10. Vuex

Vuex is a state manager that centrally stores and manages the state of all components. This section is too long. If you are not familiar with the basics, you can look at this Vuex, and the general usage is as follows

For example, create a file structure like this

The content of index.js is as follows:

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
import state from './state'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules:
    user
  },
  getters,
  actions,
  mutations,
  state
})
export default store

Then import it in main.js:

import Vue from "vue"
import store from "./store"
new Vue({
    el:"#app",
    store,
    render: h => h(App)
})

Then in the required component:

import { mapGetters, mapMutations } from "vuex"
export default{
    computed:{
        // Method 1 Then use this. property name...mapGetters(["Introduce getters.js property 1", "property 2"])
        // Method 2...mapGetters("user", ["attribute 1 in user module", "attribute 2"])
    },
    methods:{
        // Method 1 Then use this. property name...mapMutations(["Method 1 from mutations.js","Method 2"])
        // Method 2...mapMutations("user",["Method 1 from the user module","Method 2"])
    }
}

// Or you can also get this.$store.state.xxx like this
this.$store.state.user.xxx

11. $root

$root can get the data and methods in App.vue

12. slot

It is to pass the data of the child component to the parent component through the slot, and then insert it back

// Child.vue
<template>
    <div>
        <slot :user="user"></slot>
    </div>
</template>
export default{
    data(){
        return {
            user:{ name:"Muhua" }
        }
    }
}

// Parent.vue
<template>
    <div>
        <child v-slot="slotProps">
            {{ slotProps.user.name }}
        </child>
    </div>
</template>

This concludes this article about 12 types of component communication in Vue2.x. For more relevant Vue2.x component communication content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

The difference and usage of Vue2 and Vue3 brother component communication bus
Vue.js parent-child component communication development example
Parent-child component communication in Vue and using sync to synchronize parent-child component data
Development of todolist component function in parent-child component communication in Vue
Summary of 10 component communication methods in Vue3

<<: Solution to the problem of not finding Tomcat configuration in Intelli Idea

>>: Operate on two columns of data as new columns in sql