• This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Component_Communication

prop

When a parent component passes data to a child component, it can pass it through a feature.

This is recommended for parent -> child communication.

$emit

When a child component passes data to its parent, it fires an event that throws data.

This is recommended for child -> parent communication.

v-model

.sync

$attrs

When an ancestor component passes data to a descendant component, it can use $attrs pass.

Demo or small projects can use $attrs for data transfer, medium and large projects are not recommended, data flow can become difficult to understand.

The real purpose of $attrs is to write base components that give some DOM elements non-prop features.

$listeners

You can execute the ancestor component’s functions in descendant components to implement data passing.

$Listeners can be used for demos or small projects, but are not recommended for medium and large projects and may make data streams difficult to understand.

The real purpose of $Listeners is to point all event listeners to a specific child of the component.

$root

The data of the root instance can be accessed in the child component.

This is handy for demos or very small applications with a few components. Medium and large projects are not applicable. Can make the application difficult to debug and understand.

$parent

The parent instance’s data can be accessed in the child component.

This is handy for demos or very small applications with a few components. Medium and large projects are not applicable. Can make the application difficult to debug and understand.

$children

The child instance’s data can be accessed in the parent component.

This is handy for demos or very small applications with a few components. Medium and large projects are not applicable. Can make the application difficult to debug and understand.

ref

The child instance’s data can be accessed in the parent component.

$refs only take effect after the component is rendered, and they are not reactive and are suitable for demo or small projects.

provide & inject

Ancestor components provide data and descendant components inject as needed.

It can couple the blocking methods of components together and make component refactoring difficult and maintenance difficult. Not recommended for medium to large projects, suitable for writing small components.

eventBus

Vue.prototype.$bus = new Vue();
Copy the code

Vue.component('cmp-a', {
  data () {
    return {
      a: 'a'}},methods: {
    onClick () {
      this.$bus.$on('click'.this.a)
    }
  },
  template: ` < div > < button @ click = "onClick" > click < / button > < / div > `,})Copy the code

Vue.component('cmp-a', {
  mounted () {
    this.$bus.$on('click'.data= > {
      console.log(data); })},template: ` 
      

       b
      
 `,})Copy the code

You can use this approach when non-parent components communicate, but only for small projects. When used in medium and large projects, the code will be chaotic and difficult to maintain.

Vuex

State management, medium and large projects are strongly recommended to use this method, learn later ~

The last

If it is helpful to you, I hope to give you a 👍 comment/collection/three even!

Bloggers are honest and answer questions for free ❤