Detailed explanation of the relationship between Vue and VueComponent

Detailed explanation of the relationship between Vue and VueComponent

The following case reviews the knowledge points of the prototype chain we learned before

       // Define a constructor function Demo() {
            this.a = 1
            this.b = 2
        }
        //Create a Demo instance object const d = new Demo()
        console.log(Demo.prototype); //Display prototype properties console.log(d.__proto__); //Implicit prototype properties console.log(Demo.prototype === d.__proto__); //true
        //The programmer operates the prototype object by displaying the prototype attributes and appending an x ​​attribute with a value of 99
        Demo.prototype.x = 99
        console.log('@',d.__proto__.x);

Analyze VueComponent according to the following component

<body>
    <div id="root">
         <school></school>
    </div>
    <script>
        Vue.config.productionTip = false
        //Define the school component const school = Vue.extend({
            name: 'school',
            template: `
              <div>
                <h2>School name: {{name}}</h2>
                <h2>School address: {{address}}</h2>
              </div>
            `,
            data() {
                return {
                    name: 'Shang Silicon Valley',
                    address: 'Beijing'
                }
            }   
        })
        //Create Vue
        new Vue({
            el:'#root',
            components:{
                school,
            }
        })
    </script>
</body>

1. The school component is essentially a constructor called VueComponent , and it is not defined by the programmer, but generated by Vue.extend

2. We only need to write <school/> or <school</school>, and Vue will help us create an instance object of the school component when parsing; that is, Vue helps us execute: new VueComponent(options)

3. Special note: Every time Vue.extend is called, a new VueComponent is returned

4. About this pointing:

  • In component configuration: data functions, functions in methods , functions in watch , functions in computed , their this are all VueComponent instance objects
  • In new Vue(options) configuration: data functions, functions in methods , functions in watch , functions in computed , their this are all Vue instance objects

5. VueComponent instance object, hereinafter referred to as vc ---- component instance object

Key Points

  • An important built-in relationship: VueComponent.prototype._proto_===Vue.prototype
  • Why is this relationship necessary: ​​to allow the component instance object vc to access the properties and methods on the Vue prototype

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • Vue built-in component component--dynamically render component operations through the is attribute
  • Vue.component property description
  • vue dynamic component
  • Vue components dynamic components detailed explanation
  • Solve the component tag rendering problem of Vue

<<:  Interaction in web design: A brief discussion on paging issues

>>:  A brief discussion on the difference between MYSQL primary key constraint and unique constraint

Recommend

Use CSS to implement special logos or graphics

1. Introduction Since pictures take up a lot of s...

Kali Linux installation VMware tools installation process and VM installation vmtools button gray

Xiaobai records the installation of vmtools: 1. S...

Tutorial on installing MySQL8 compressed package version on Win10

1 Download MySQL8 from the official website and i...

MyBatis dynamic SQL comprehensive explanation

Table of contents Preface Dynamic SQL 1. Take a l...

Detailed explanation of Vue components

<body> <div id="root"> <...

MySQL 8.0.21 installation tutorial with pictures and text

1. Download the download link Click download. You...

Vue implements the question answering function

1. Request answer interface 2. Determine whether ...

How to use JS to parse the excel content in the clipboard

Table of contents Preface 1. Paste Events and Cli...

How to create a scroll bar with fixed navigation and left and right sliding using CSS

As shown above, the navigation is fixed at the to...

Detailed steps to install the NERDTree plugin in Vim on Ubuntu

NERDTree is a file system browser for Vim. With t...

mysql determines whether the current time is between the start and end time and the start and end time are allowed to be empty

Table of contents Requirement: Query ongoing acti...

Detailed explanation of homology and cross-domain required for front-end interviews

Preface As we all know, the browser's homolog...

Upgrade Docker version of MySQL 5.7 to MySQL 8.0.13, data migration

Table of contents 1. Back up the old MySQL5.7 dat...

How to insert a value containing single quotes or backslashes in MySQL statements

Preface This article mainly introduces the releva...

js to implement collision detection

This article example shares the specific code of ...