Examples of different types of filter function passed by components in the Vue document

As a front-end developer, we often need to use Vue.js to build pages. In Vue.js, components are a very important part. Passing values ​​between components is a very common requirement, and there are many different ways to pass values. In this article, we will focus on component value transfer in Vue documents and the use of different types of filter functions.

Passing values ​​in components

In Vue.js, there are several ways to pass values ​​between components:

1. props & emit

Use props to pass data from the parent component to the child component. Using emit, you can pass the data in the child component to the parent component. This method is often used for two-way communication between components. And this method is very convenient. You only need to define the data that needs to be passed in props, and use the $emit method in the subcomponent to trigger the event.

2. provide & inject

provide & inject is an API added in Vue.js2.2.0 version. Use provide to define the data that needs to be passed, and use inject to inject this data into the component. This method is often used to pass data across levels.

3. $parent & $children

The component tree in Vue.js is a depth-first traversal process. Use $parent to get the parent component instance, and use $children to get the child component instance. The disadvantage of this method is that it is not flexible enough and is not as convenient as props & emit and provide & inject.

Different types of filter functions

When we need to filter or convert data, we can use the filter function in Vue.js. Vue.js provides the following types of filter functions:

1. Global filter function

The global filter function is defined through the Vue.filter() method of. Once defined, it can be used in any component. The advantage of the global filter function is that it is simple and can be used in multiple components after being defined once. However, the global filter function will be instantiated multiple times, which will lead to poor performance if there is a lot of filtered data.

2. Local filter function

The local filter function is defined in the component. It can only be used inside this component. The advantage of this approach is better performance because it only needs to be instantiated once in the component. The disadvantage is that it is very limited and can only be used within the component.

3. Pure function filter function

Pure function filter function refers to inputting certain parameters and outputting a certain result, which will not be affected by any external state. This method is more convenient to use and can avoid some side effects. However, it should be noted that pure function filter functions cannot change the original data.

Examples of filter functions

Let’s take a look at the usage of filter functions through examples. In this example, we define a component, pass an array to this component, and use the filter function inside the component to filter the array.

<template>
  <div>
    <ul>
      <li v-for="item in filteredData">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    filteredData() {
      return this.data.filter(item => {
        return item % 2 === 0
      }).map(item => {
        return item * 2
      })
    }
  }
};
</script>

This component passes an array data and filters the array through the filter function. In the computed attribute, we used JavaScript's filter and map methods to filter the even numbers in the array, and multiplied the filtered data by 2. Finally, we return the filtered data to the component for display.

Summary

Vue.js provides a wealth of component value transfer methods and filter functions. We can choose different methods for development according to different needs. During use, we need to comprehensively consider factors such as performance, flexibility, code reusability, etc. to determine the best development method.

The above is the detailed content of Examples of different types of filter function passed by components in the Vue document. For more information, please follow other related articles on the PHP Chinese website!