Vue component communication mode comprehensive detailed explanation

1.props 和 $emit

This combination will be familiar to any developer who has worked on a Vue stack development project, and it is one of the many ways we use component communication. Props can communicate with parent and child components in the form of one-way data flow.

Unidirectional data flow: Data can be transmitted from the parent component to the child component only through props. The child component cannot change the state of the parent component by modifying the data transmitted by props. As for why, the Vue website explains:

All prop forms a one-way downlink binding between their parent prop: updates to the parent prop flow down to the child, but not the other way around. This prevents accidental changes in the state of the parent component from the child, which can make the data flow of your application difficult to understand. Additionally, every time the parent component is updated, all prop in the child component will be refreshed to the latest value. This means that you should not change a prop inside a child component. If you do, Vue will issue a warning in the browser console. – Vue website

Because of this feature, there is a corresponding $emit. $emit is used to trigger events on the current instance. We can do this by customizing a logic in the parent that handles accepting the changed state, and then triggering the parent’s logic to handle the event when the relevant state changes in the child.

/ / the parent component
Vue.component('parent', {
  template:` 
      
 
       
this is parent component! 
 
        
      
 `,
  data() {
    return {
      message: 'hello'}},methods: {// Executes the event triggered by the child component
    getChildData(val) {
      console.log(val); }}});/ / child component
Vue.component('child', {
  template:` 
      
 
        
      
 `./** * props: {* message: {* type: String, * default: '' *} *} * */
  props:['message'], 
  data() {
    return {
      // This is necessary because you cannot modify the props value directly
      myMessage: this.message
    }
  },
  methods:{
    passData(val) {
      // Events in the parent component are triggered when the data state changes
      this.$emit('getChildData', val); }}});var app=new Vue({
  el: '#app'.template: ` 
      
 
        
      
 `
});
Copy the code

In the example above, we have a parent component and a child component.

• 1) The parent component passes the message data to the child component, and uses v-ON to bind a getChildData event to listen for the child component’s trigger event;
• $this.$emit (); / / This.$this.$emit (); / / this.

In the example above, we define components A, B, and C, where component B is A child of component A and component C is A child of component B.

• 1). In component A, define A property value (Message, Messagec) and A listening event (getChildData, getCData) for component B and C respectively, and pass these to A direct subcomponent B of component A via props;
• 2). In component B, props obtains only the properties directly related to itself (message), and caches the property values in data so that subsequent changes can be monitored for processing. Then, when the property values change, the data logic processing event defined by parent component A (getChildData) is triggered. Component C, a direct child of component B, passes properties$attrsAnd bind events$listeners;
• 3). It is directly bound to the V-Model in component C$attrsProperty, bound by V-ON$listeners;

Note $listeners and $attrs separately.

• $attrs: contains property bindings (except class and style) in the parent scope that are not recognized (and retrieved) by prop. When a component does not declare any prop, it contains all the binding properties of the parent scope (except class and style) and can be passed in to the internal component with v-bind=”$attrs”.

• $Listeners: Contains V-on event listeners in the parent scope (without.native modifiers). It can be passed into internal components via V-on =”$Listeners “.

In the example above, we define components A and B, but there is no relationship between components A and B.

• 1) First we passnew Vue()Instantiate an instance of Vue, which we call the central EventBus EventBus, and assign it toVue.prototype.$EventBusTo make all business logic components accessible;
• 2), then define component A, in the component A definition of A processing method passData, mainly defined to trigger A globalglobalEventEvent and passes a parameter;
• 3). Finally define component B, inside component BmountedThe lifecycle listens for globals defined in component AglobalEventEvent and performs some logical processing inside the callback function.

A central EventBus (EventBus) is a simple way to interact with any component. There is no extra business logic. You only need to trigger an event in the state-changing component and then listen for that event in the processing logic component. This method is perfect for small projects!

5,v-model

This is a bit like props, but it certainly has its own props too! Anyway, code first!

// Define the parent component
Vue.component('parent', {
  template: ` 
      
 
       
this is parent component! 
 
       
{{message}}
 
        
      
 `,
  data() {
    return {
      message: 'hello'}}});// Define the child component
Vue.component('child', {
  template: ` 
      
 
        
      
 `.props: {
    value: String.// The V-model will automatically pass a props property with a field value
  },
  data() {
    return {
      mymessage: this.value
    }
  },
  methods: {
    changeValue() {
      this.$emit('input'.this.mymessage); // This call changes the value of the V-Model binding on the parent component}}});const app = new Vue({
  el: '#app'.template: ` 
      
 
        
      
 `
});
Copy the code

When you think of the V-model specification, you probably think of two-way data binding, such as the input value, and the following display displays the content based on the input in real time. Did you feel magical when you first learned Vue? No matter you did, I had this feeling!

For detailed v-Model usage and implementation of the custom component V-Model, go here! Here we focus on how the V-Model implements parent-child component communication.

In the example code above, we define the parent and child components, which are parent-child relationships, and the V-Model can only communicate between parent and child components.

• 1) In the parent component, we implement the v-model binding of message property for the user-defined Child component. This is equivalent to passing the value attribute to the Child component and binding the input event.
• 2) In the child component, the props can be used to obtain the value property, and the value is caged on myMessage of the data, and then passed on the inputv-modelThe bindingmymessageProperties and achangeEvents. When the input value changes, the change event is raised to process the parent component throughv-modelBound to the Child componentinputEvent, triggerparentIn the componentmessageProperty value change, donechildThe child component changes the property value of the parent component.

Here is mainly the realization principle of V-Model to focus on understanding! This approach is useful for separating presentation components from business logic components.

7,$boradcast 和 $dispatch

This also came in pairs, but it was only available in VU1.0, which was deprecated in Vu2.0, but there are many open source software packages that encapsulate this way of component communication, such as Mint UI, Element UI, and iView.

// The main logical processing method of the broadcast method
function broadcast(componentName, eventName, params) {
  this.$children.forEach(child= > {
    const name = child.$options.componentName;

    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else{ broadcast.apply(child, [componentName, eventName].concat(params)); }}); }export default {
  methods: {
    // Define the dispatch method
    dispatch(componentName, eventName, params) {
      let parent = this.$parent;
      let name = parent.$options.componentName;
      while(parent && (! name || name ! == componentName)) { parent = parent.$parent;if(parent) { name = parent.$options.componentName; }}if(parent) { parent.$emit.apply(parent, [eventName].concat(params)); }},// Define the broadcast method
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params); }}};Copy the code

Broadcast triggers events to a specific parent component, dispatch triggers events to a specific child component, and is essentially an ON/EMIT wrapper, which is useful in some basic components.

Since this API was deprecated in Vue 2.0, we will mention it here. If you want to learn more about the implementation of this API in Vue 1.0 and other Vue based UI frameworks, you can check out this article!

conclusion

Now that I’ve covered all the ways in which components can communicate in Vue, isn’t that a bit overwhelming? In fact, there are two other ways to communicate components. One is through the Vue Router, and the other is through the browser local storage. I won’t talk about these two methods here, but I will explain them separately in this column, which I hope you are interested in.

To be precise, this article details six ways to implement Vue communication, each of which has its own characteristics. In the actual project, you can use it as appropriate.