Home > Web Front-end > JS Tutorial > Detailed analysis of several postures in Vue.js component communication

Detailed analysis of several postures in Vue.js component communication

黄舟
Release: 2017-10-23 09:40:05
Original
1330 people have browsed it

What are Vue components?

Component is one of the most powerful features of Vue.js. Components can extend HTML elements, encapsulating reusable code. At a high level, a component is a custom element to which Vue.js's compiler adds special functionality. In some cases, components can also take the form of native HTML elements, extended with the is attribute.

Communication between Vue components

Communication from parent component to child component

Method 1: props

Using props, the parent component can use props to pass data to the child component.

Parent component vue template father.vue


<template>
  <child :msg="message"></child>
</template>
<script>
import child from &#39;./child.vue&#39;;
export default {
  components: {
    child
  },
  data () {
    return {
      message: &#39;father message&#39;;
    }
  }
}
</script>
Copy after login

Child component vue template child.vue


<template>
  <p>{{msg}}</p>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  }
}
</script>
Copy after login

Method 2 uses $children

Use $children to access child components in the parent component.

The child component communicates with the parent component

Method 1: Using vue events

The parent component passes the event method to the child component, and the child component triggers the event through $emit and calls back to the parent component.

Parent component vue template father.vue


<template>
  <child @msgFunc="func"></child>
</template>
<script>
import child from &#39;./child.vue&#39;;
export default {
  components: {
    child
  },
  methods: {
    func (msg) {
      console.log(msg);
    }
  }
}
</script>
Copy after login

Child component vue template child.vue


<template>
  <button @click="handleClick">点我</button>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  methods () {
    handleClick () {
      //........
      this.$emit(&#39;msgFunc&#39;);
    }
  }
}
</script>
Copy after login

Method 2: Modify the parent component data by modifying the props passed by the parent component

This method can only be used when the parent component passes a reference variable , literal variables cannot achieve the corresponding effect. Because the drinking variable ultimately points to the same memory address, whether it is the data in the parent component or the data in the props obtained by the child component, so modifying the data in the props in the child component modifies the data in the parent component.

But this is not recommended. It is not recommended to directly modify the value of props. If the data is used to display modifications, in actual development I often put it into data and pass it back when needed. The parent component then uses events to return data. This keeps the components independent and decoupled, and does not cause abnormal data flow confusion due to the use of the same data. Data is only transmitted through specific interfaces to modify the data, and the internal data status is managed by specialized data.

Method 3: Use $parent

Use $parent to access the data of the parent component.

Data transfer between non-parent-child components and sibling components

For non-parent-child component communication, Vue officially recommends using a Vue instance as the central event bus.

Vue has an internal event mechanism, you can refer to the source code.

$on method is used to listen to an event.

$emit is used to trigger an event.


/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();
/*监听事件*/
event.$on(&#39;eventName&#39;, (val) => {
  //......do something
});
/*触发事件*/
event.$emit(&#39;eventName&#39;, &#39;this is a message.&#39;);
Copy after login

Multi-level parent-child component communication:

In Vue1.0, two methods, $broadcast and $dispatch, are implemented to send messages to child components (or Parent component) broadcasts (or dispatches). When the child component (or parent component) listens for the event and returns true, it will continue to broadcast (or dispatch) the event to the grandchild-level component. But this method has been removed in Vue2.0.

When I was learning about element, the open source component library of Ele.me, I found that they re-implemented the broadcast and dispatch methods and introduced them in the form of mixin. For details, please refer to "Talk about element component library broadcast and dispatch". But it is slightly different from the two method implementations of Vue1.0. These two methods implement the functions of event broadcasting to descendant components and event dispatching to multi-level parent components. But it is not event broadcasting in a broad sense. It requires specifying a commentName to broadcast (dispatch) events to the component with the specified component name.

In fact, the internal implementation of these two methods still uses $parent and $children, which are used to traverse child nodes or query parent nodes step by step. When the specified component name is accessed, $emit is called to trigger Specify event.

Complex single-page application data management

When the application is complex enough, please use vuex for data management.

Summarize

The above is the detailed content of Detailed analysis of several postures in Vue.js component communication. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template