Basic usage details of Vue componentization

Preface:

Sometimes there is a set of HTML structured code, and events may be bound to it. Then this code may be used in multiple places. If it is copied here and there, a lot of code will be repeated, including the code in the event part. Then at this time we can encapsulate these codes into a component, and when we use it in the future, we can just use it like using ordinary html elements.

1. What is componentization?

vue.js has two magic weapons, one is data-driven, the other is componentization, so the question is, what is componentization and why do we need componentization? Next, I will answer these two questions one by one. The so-called componentization is to split the page into multiple components, and develop and maintain CSS , JS , templates, pictures and other resources that each component depends on together. Because components are resource independent, they can be reused within the system and can be nested. If the project is complex, the amount of code can be greatly simplified and it is also more friendly to later demand changes and maintenance.

2. Basic use

<div id="app">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>
<script>
  // Define a new component called button-counter Vue.component('ButtonCounter', {
    data: function () {
      return {
        count: 0
      }
    },
    template: '<button @click="count++">Clicked {{ count }} times</button>'
  })
  const app = new Vue({
    el: "#app",
    data: {
      message: "hello"
    }
  })
</script>

Above we created a component called button-counter , which implements the function of recording how many times a button is clicked. If we want to use it later, we can just use it through button-counter . Then because components are reusable Vue instances, they receive the same options as new Vue , such as data , computed , watch , methods , and lifecycle hooks. The only exceptions are root instance-specific options like el.

Another thing to note is that data in the component must be a function!

Let's take a look at the results achieved:

We used the button-counter component three times above, so the page will show three of them, and each component will maintain its count independently, because every time you use a component, a new instance of it will be created. Each instance can maintain an independent copy of the returned object, which is why we use the function in data

This is the end of this article about the basic usage details of Vue componentization. For more relevant Vue componentization usage content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!