“This is the 22nd day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

17. Non-single file components

1. Define components

Created using vue.extend (options), where the object Options and new Vue(options) pass in options that are almost the same, but there are some differences.

Options object in vue.extend (options) :

  • uselesselProperty, and eventually all components pass throughvmManagement, byvmIn theelDecide which container to serve.
  • dataIt must be written as a function that returns an object. Avoid reference relationships when components are reused.
const name = Vue.extend({
    template: ` < div class = "demo" > < h2 > name: {{name}} < / h2 > < button @ click = "showName" > print name < / button > < / div > `.data() {
        return {
            name: 'Jack'}; },methods: {
        showName() {
            console.log(this.name); ,}}});Copy the code

2. Register components

1. Global registration

Vue.component('name', name);
Copy the code

Where the first parameter ‘name’ is the component name and the second parameter name is the component object.

2. Partial registration

You can define the components you want to use in new Vue:

new Vue({
  el: '#app'.components: {
    'name': name,
    'component-b': ComponentB
  }
})
Copy the code

Where ‘Component-a’ represents the component name, and ComponentA is the component object.

3. Use components

According to the component name, the component label can be:

<div id="root">
    <name></name>
</div>
Copy the code

You can also use a single tag:

<div id="root">
    <name/>
</div>
Copy the code

4. Pay attention to the point

1. The component name

(1) One word

  • school
  • School

(2) Multiple words

  • my-school
  • MySchool(Vue scaffolding required)

The component name cannot be the same as an existing HTML tag element, such as strong or div.

Alternatively, you can use the name attribute to specify the name of the component to render in developer tools:

const school = Vue.extend({
    name: 'my-component'.// Specify the name to display in developer tools
    template: ` < div class = "demo" > < h2 > name: {{name}} < / h2 > < button @ click = "showName" > print name < / button > < / div > `.data() {
        return {
            name: 'Jack'}; },methods: {
        showName() {
            console.log(this.name); ,}}});Copy the code

2. Component labels

  • <school></school>
  • <school/>(Vue scaffolding is required)

3. Abbreviations

const school = Vue.extend(options)
Copy the code

Where, the object can be directly abbreviated as options:

const school = { ... }
Copy the code

5. Nested components

// Define the Hello component
const hello = Vue.extend({
    template: `<h1>{{msg}}</h1>`.data() {
        return {
            msg: 'Hello! '}; }});// Define app components
const app = Vue.extend({
    template: ` 
      
 
        
      
 `.components: {
        hello,
    },
});

/ / create the vm
new Vue({
    template: '<app></app>'.el: '#root'.components: { app },
});
Copy the code

6. VueComponent

A school component is defined, but the school component is essentially a constructor called VueComponent, which is automatically generated by vue.extend.

Each time
is parsed, Vue creates an instance object of the School component, which Vue automatically executes: new VueComponent(options).

In addition, each call to vue.extend returns a brand new VueComponent.

VueComponent has an important relationship with Vue:

VueComponent.prototype.__proto__ === Vue.prototype
Copy the code

In this way, the component instance object we define has access to properties and methods on the Vue prototype chain.