VUE3 basic tutorial: props and computed using Vue.js responsive framework

Vue.js is a popular JavaScript framework for building web applications with responsive systems. Vue.js provides an easy-to-use set of directives and components to simplify the development process. In this article, we will learn an important concept - props and computed.

Props are the way to pass information in Vue.js components. It allows us to pass data from parent component to child component. In child components, we can use the passed data for binding and processing.

Let us look at an example:

Parent component:

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello'
    }
  }
}
</script>

Child component:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String
  }
}
</script>

In the parent component, we put a component named message The data is bound to the subcomponent's property: message. We can also define data checksum default values ​​in child components. In the above example, we receive data from the parent component by defining a prop called message in the child component.

Computed is another powerful feature of the Vue.js responsive system. Computed properties are computed properties that are cached based on their responsive dependencies. When dependencies change, computed will recalculate their property values.

Let us make a simple example of calculated properties:

<template>
  <div>
    <input v-model="message">
    <p>计算过的信息：{{ computedMessage }}</p>
  </div>
</template>

<script>
export default {
  name: 'ComputedExample',
  data() {
    return {
      message: ''
    }
  },
  computed: {
    computedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

In this example, we define a two-way binding input box, bind the message value through v-model, and then we A computed attribute computedMessage is defined. When the message value changes, computedMessage will be recalculated. In our calculation, it reverses the characters of the message and returns a new string.

Summary:

props and computed are the two core features of the Vue.js responsive system. Use props to pass data to child components, and use computed to define responsive calculated properties. When we use them appropriately in our applications, we can better manage and organize our code. As we continue to learn Vue.js, we will encounter some other reactive system features and directives, such as watchers and v-bind.

The above is the detailed content of VUE3 basic tutorial: props and computed using Vue.js responsive framework. For more information, please follow other related articles on the PHP Chinese website!