Solutions to component data flow issues in vue.js

This article mainly introduces the issues about data flow of vue.js components. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look

1. Components

Components can be said to be an indispensable part of the modern front-end framework. . Using components can not only greatly improve the reuse rate of code and the development efficiency of developers, but is also of great significance for the later maintenance of the code. In front-end development, due to historical reasons, although WebComponent is easy to use, its development is greatly restricted. Like many emerging front-end technologies, it is out of reach. Based on this situation, smart developers try to complete componentization by integrating corresponding functions within the framework. Various modern front-end frameworks basically have their own implementations. Here we analyze the components of vue, focusing on the flow of data.

2. Vue components

Vue components are based on ordinary HTML when creating templates. There is no need to learn jsx, handlebars, etc. special syntax, so relatively speaking, the learning cost is relatively low and it is easier to get started. When using vue components, it is generally divided into two parts: component registration and component invocation.

(1) Component registration

Vue.component('pop-box', {
  template:  &#39;<p class="component-box">\
    <p class="component-content">\
    ..........
    </p>\
  </p>&#39;,

  props: [...],

  data: function () {
    return ...;
  },

  methods: {
    ...
  },

  mounted () {
    ...
  },

  ...
});

Using the Vue.component method we can easily create a globally available component. Of course, you can also register local components inside instances or components, but the principles are similar. The first parameter of Vue.component is the name of the component, or the unique identifier (id). Subsequent calls will use this name; the second parameter is an object, which usually contains the template (template), component Key information such as data (data, computed), methods (methods), hook functions (created, mounted...) maintained within.

It is worth noting:

1. The data in the component must be a function, and its return value will be used as the actual "data";

2. The hook functions of vue1.x and vue2.x are slightly different. If you find that the hook function does not take effect, remember to confirm the vue version.

(2) Component call

(1) Start tag + end tag mode

<pop-box text="200" v-bind:number="200"></pop-box>

(2) No end tag mode

<pop-box text="200" v-bind:number="200" />

There are two modes above for calling vue components. There is actually no difference between the two modes if slot is not used, but if you need to use slot, you can only use the mode that contains both the start tag and the end tag.

It is worth noting that when binding data above, the form of property="value" is directly used. Regardless of whether the value is a number or a string, the property is ultimately of string type. If you want it to be a numeric type, use the form v-bind:property="value", or abbreviated as :property="value".

3. Vue component data flow

vue follows the principle of typical one-way data flow, that is, data is always passed by the parent component To the child component, the child component can have its own data maintained inside it, but it does not have the right to modify the data passed to it by the parent component. When developers try to do this, Vue will report an error. The advantage of this is to prevent multiple child components from trying to modify the state of the parent component, making this behavior difficult to trace. The specific implementation method in vue is as follows:

The parent component passes data to the child component by binding props, but the child component itself does not have the right to modify these If the data needs to be modified, the modification can only be reported to the parent component through an event, and the parent component itself decides how to process the data.

(1) Simple example

<p id="app">
  <my-counter @inc="increase" :counter="counter"></my-counter>
</p>
...
Vue.component(&#39;my-counter&#39;, {
  template:  &#39;<p class="counter">\
    <p>{{counter}}</p>\
    <button @click="inc">increase</button>\
  </p>&#39;,

  props: [&#39;counter&#39;],

  methods: {
    inc: function () {
      this.$emit(&#39;inc&#39;);
    }
  }
});

var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    counter: 0
  },
  methods: {
    increase () {
      this.counter ++;
    }
  }
});

In order to make it simpler, only one my-counter component is created as a sub-component. We can temporarily think of the instance of vue as a parent component.

(2) Analysis of data flow analysis

(1) We define a data called counter in the parent component;
(2) When calling the component, pass the counter of the parent component to the prop in the form of :counter="counter" In the subcomponent;
(3) The subcomponent reads the counter and displays it in the template;
(4) When the user clicks the button, the counter needs to be increased;
(5) The subcomponent listens to this event, but it does not directly modify the counter, but reports the event that needs to be added to the parent component in the form of a custom event through this.$emit('inc');
(6) Parent component , because by executing @inc="increase", you can monitor the events reported by the sub-component, and increase the counter in your own increase method;
(7) The data in the parent component is updated, The data in the subcomponent will also be automatically updated, and the interface content will also be updated. This process is automatically completed by the framework.

(3) Summary

The above example basically completely displays the main data flow direction of vue, but this method based on prop/evnet only It is suitable for components with a direct parent-child relationship. If the data flow of sibling components or a large number of components is based on this method, it will become very troublesome. In this case, you can consider using a more powerful state management mode.

The above is the detailed content of Solutions to component data flow issues in vue.js. For more information, please follow other related articles on the PHP Chinese website!