demand

In the previous chapter, we used WebPack to build a project for vUE development rendering components.

But what if you want to call the methods of a VUE component?

Use export Default to call the login component’s methods

inlogin.vueThe use ofexport defaultexposedscriptMethod to provide execution

<template>
    <div>
        <h1>This is the login component -- {{MSG}}</h1>
    </div>
</template>

<script>

    export default {
        data(){
            return {
                msg: 123,}},methods: {show(){
                console.log("Call the show method of the Login component!")}},mounted() {
            this.show(); }}</script>

<style>

</style>

Copy the code

Open the page to view the following:

Summary of syntax use in ES6

  1. Export members from the module using export Default and export; Exports and exports in ES5

  2. Import other modules using import ** from ** and import ‘path’ as well as import {a, b} from ‘module identifier’

Let’s look at an example.

Export the default sample

First write a test.js, then use export Default to expose an object, then import and use it in main.js.

1. Write test. Js

// Use export default to expose members
export default {

    info: {
        name: "lisi".age: 28}},Copy the code

2. Write main.js to import the test.js member

// Import test.js and set arbitrary variable m1 as the import object
import m1 from './test.js'

console.log(m1.info); // Prints the info object in test.js

Copy the code

Note: Object variables imported using export Default can be received by any named variable.

View the printed information in the browser

3. Modify the receiving variable name to check whether the information can be displayed normally

Open the browser as follows:

4. Can export default be exposed multiple times?

Error found when compiling:

Note: Export default can be used only once. So what if you want to expose other members?

You can use export

Export the sample

1. Use export to expose member variables

The secondary member cannot be exposed using export Default above, so export can be used to expose the secondary member as follows:

// export exposes member objects
export var info2 = {
    name: "zhangsan".age: 30
};

Copy the code

2. Use curly braces{variable name}To import the member variables exposed by export

Open the browser to check whether it can print normally, as follows:

3. The names of variables exposed by export and imported variables must be the same

If the imported variable names are inconsistent, an error message is displayed as shown in the following example:

Change the receiver variable name to info3 and look at the printed message:

Description:

The names of member variables exposed using export must be the same as those imported using import.

Use 4.exportExpose multiple members

Import multiple members simultaneously using import as follows:

The following information is displayed in the browser:

5. Members exposed by export can be imported on demand. For members that are not needed, the{}You can leave the receive undefined

6. Import the members exposed by export and use themasSet an alias

In the previous example, the member name exposed by export must be the same as that imported by import. What if the name is needed? You can use AS to set the alias.

Check whether Info4 can be displayed:

For more exciting original Devops articles, please come to my official account: Devops Community: