Vue introduces external function methods

Vue.js is a popular JavaScript framework for building interactive web applications. In Vue.js, we can easily introduce external methods and functions and bind them with Vue instances. This allows us to more flexibly extend Vue applications with richer functionality. This article will introduce how to introduce external function methods in Vue.js.

The steps to introduce external function methods in Vue.js are as follows:

1. Define external function methods

First, we need to define what we want to introduce External function methods. These methods can be modules introduced through import statements or functions defined in the global scope. For example, we can define a function named calculate in the following way:

function calculate(a, b) {
  return a + b;
}

2. Introducing the function into the Vue component

Vue.js Components are the basic building blocks of an application. We can introduce external function methods into Vue components. In the Vue component, we can introduce external functions through the import statement:

<script>
import { calculate } from './utils.js';

export default {
  name: 'my-component',
  data() {
    return {
      result: 0
    }
  },
  methods: {
    calculateResult() {
      this.result = calculate(2, 3);
    }
  }
}
</script>

In this example, we pass import {calculate} from './utils.js'# The ## statement introduces a function named calculate. Then we can use the calculate function in the method of the Vue component.

Register components in the Vue instance

components option:

<script>
import MyComponent from './MyComponent.vue';

export default {
  name: 'app',
  components: {
    'my-component': MyComponent
  }
}
</script>

MyComponent Go to the Vue instance and use 'my-component' as the name of the component. In this way, we can use the tag in the Vue instance as the entry point of the component.

Using components

tag and call the calculate function in the component:

<my-component></my-component>

// MyComponent.vue
<template>
  <div>
    <button @click="calculateResult">Calculate</button>
    <p>Result: {{ result }}</p>
  </div>
</template>

<script>
// 引入我们的calculate函数
import { calculate } from './utils.js';

export default {
  name: 'my-component',
  data() {
    return {
      result: 0
    }
  },
  methods: {
    calculateResult() {
      this.result = calculate(2, 3);
    }
  }
}
</script>

tag is used in the Vue template and a button is created in the component's template. When the user clicks the button, we call the calculateResult method and calculate the result using the calculate function. Then update the calculation result to the result property in the Vue component.

The above is the detailed content of Vue introduces external function methods. For more information, please follow other related articles on the PHP Chinese website!