Detailed explanation of vue components and reuse

Component (Component) is one of the most powerful features of Vue.js. Components can extend HTML elements, encapsulating reusable code. This article mainly introduces vue components and reuse. Friends in need can refer to

1. What is a component

Component (Component ) is one of the most powerful features of Vue.js. Components can extend HTML elements, encapsulating reusable code.

2. Component usage

Components need to be registered before they can be used. There are two ways of registration: global registration and local registration.

2.1 After global registration, any V ue instance can be used. For example:      

 

      
    
Vue.component('my-component',{
  template: '
这里是组件的内容
'
});
var app1 = new Vue({
  el: '#app1'
});

To use this component in the parent instance, you must register it before the instance is created, and then you can use 4e7eafdd1c32265d18b529a96b17e668

The DOM structure of the template must be contained by an element. If it is written directly as "here is the content of the component" without "e388a4556c0f65e1904146cc1a846bee

2.2 In a Vue instance, you can use the component option to register a component locally. The registered component is only valid within the scope of the instance. For example:

    

      
    
var app2 = new Vue({
  el: '#app2',
  components:{
   'my-component1': {
     template: '
这里是局部注册组件的内容
'
   }
  }
});

2.3 data must be a function

In addition to the template option, other options can also be used in the component like a Vue instance. Such as data, computed, methods, etc. But when using data, it is slightly different from the example. data must be a function, and then the data is returned.

    

      
    
Vue.component('my-component3',{
  template: '
{{message}}
',
  data: function(){
    return {
      message: '组件内容'
    }
  }
});
var app3 = new Vue({
  el: '#app3'
});

Generally, the returned object should not refer to an external object, because if the returned object refers to an external object, then this object is shared, and any Any modifications made by one party will be synchronized.

So generally a new independent data object is returned to the component.

Supplement: vue-router component reuse issue

The component system is an important part of Vue, it can combine a complex page The abstraction is decomposed into many small, independent, reusable components, and the application is composed by combining the components. Combined with the routing function of vue-router, each component is mapped to the corresponding route, and the changes in the routing are used to tell Vue where to render. They implement jump navigation between various components and pages.

Problem

When using vue-router to switch routes, it will trigger the update of the component tree and render a new component tree according to the defined route. The general switching process is as follows of:

- Deactivate and remove unnecessary components
- Verify the feasibility of switching
- Reuse components that have not been updated
- Enable and activate new components

For specific route switching control process, please refer to the official document: Switching Control Pipeline

How does vue-router determine that a certain component can be reused? Let’s take a look at the following routing configuration:

{
  path: 'post/:postId',
  name: 'post',
  component: resolve => require(['./components/Post.vue'],resolve)
}

This is the route that loads the corresponding article page through the article ID. When accessing for the first time, Post.vue The component will be rendered into the component tree. When the mounted component is installed, the article content is obtained through the article ID and displayed on the page. When we access another article, the routing parameter: postId changes. According to our expectations, the new article should be displayed. content, but it backfired.

What we see is still the previous article. Although the routing parameters have changed, vue-router will think that you are accessing the Post.vue component. Since the component has been rendered before, it will be copied directly. Use the previous component and will not perform any operations in the component including life cycle functions such as mounted.

So what we finally see is the content of the original component.

So how can we achieve the desired effect? An effective solution is introduced below

Solution

We can use the watch listener to monitor routing changes. According to the routing The parameters change to respond to the corresponding data. The specific implementation process is as follows:

Define the data acquisition method

First define a method to obtain articles, and obtain the corresponding article information from the background according to the article ID .

methods: {
  getPost(postId) {
    this.$http.get(`/post/get_post/${postId}`).then((response) => {
      if(response.data.code === 0){
        this.post = response.data.post;
      }
    });
  }
}

Listen to the route

The next step is to determine whether the target component is a Post.vue component when the route is switched. This can be implemented based on the defined routing name name. If so, we can get the target article ID from the routing information to update the component content.

watch: {
  '$route' (to, from) {
    if(to.name === 'post'){
      this.getPost(to.params.postId);
    }
  }
}

Component initialization

What needs to be noted here is that when the component is mounted to the component tree for the first time , the monitoring of routing is invalid. At this time, we need to initialize the component in the life cycle hook mounted:

mounted() {
  this.getPost(this.$route.params.postId);
}

Write at the end

Through the above method, the component content can be updated as the routing parameters change, which effectively solves the problem of invalid routing parameters caused by the reuse of vue-router components.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

JavaScript generates a time list within a specified range

Detailed explanation of parameters based on webpack.config.js

nodejs method to implement file upload based on express

##

The above is the detailed content of Detailed explanation of vue components and reuse. For more information, please follow other related articles on the PHP Chinese website!