How many ways are there to pass values ​​in Vue?

Vue is a popular JavaScript framework commonly used to build user interfaces and single-page web applications. In Vue applications, data transfer between components is very important. Vue provides a variety of value-passing methods to share data between components. This article will introduce in detail the value passing method in Vue.

1. props

props is one of the most commonly used value-passing methods in Vue, and it is very easy to understand. It allows parent components to pass data to child components. In Vue, components can also be used like HTML tags. Below is an example showing how to pass data using props.

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

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

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

In this example, we use the syntax :title="message"Pass the data message in the parent component to the child-component as a prop. In the child component, we can receive this prop through the props keyword.

<template>
  <div>
    <h1 id="title">{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: ['title'],
}
</script>

In the child component, this prop is received through props: ['title'] and displayed in the template.

2. Emit

emit allows child components to pass data to parent components. In order to use emit, you need to trigger a custom event using the $emit method in the child component and listen to this event in the parent component. The following is an example of using emit to pass data.

<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    increment() {
      this.count++
      this.$emit('increment', this.count)
    },
  },
}
</script>

In this sample code, when the button is clicked, the increment method will be called and the this.$emit method will be called to trigger the custom event 'increment'. We can carry data in the event, here we pass count as an option to the parent component.

<template>
  <div>
    <child-component @increment="incrementCount"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      total: 0,
    }
  },
  methods: {
    incrementCount(count) {
      this.total = count
    },
  },
}
</script>

In the template of the parent component, we use the syntax @increment="incrementCount"Listen to the custom events in the child component. When the child component triggers the 'increment' event, we Call the incrementCount method to update the state of the parent component.

3. Vuex

Vuex is a state management pattern developed specifically for Vue applications. It provides a global state management center and uses some common state management patterns, such as state, getters, mutations, actions, etc.

The advantage of using Vuex is that it provides a central repository to transfer data, which can make the state of the application more controllable and maintainable. In Vuex, state can be passed to components through the store.

The following is a simple Vuex example. In the store, we define a variable count and expose a increment mutation, which can update the count status.

// store.js
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state, payload) {
      state.count += payload
    },
  },
})

export default store

In the component we can use $store to access the state and operations in the Vuex repository. The following is an example of using Vuex to update the state.

<template>
  <div>
    <h1 id="store-state-count">{{ $store.state.count }}</h1>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment', 1)
    },
  },
}
</script>

In this code example, when the button is clicked, the increment method is called and the this.$store.commit method is called to pass the data to the Vuex repository increment mutation in to update the state.

4. Provide/Inject

Provide/Inject provides a means of component communication that allows you to easily share data between all descendant components in the chain. It allows parent components to provide data and for descendant components to consume the data.

In the parent component, we provide data through the provide attribute.

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  provide() {
    return {
      message: 'Hello from parent component.',
    }
  },
}
</script>

In this example, we use provide to provide data message and pass it to the child component. In child components, we can use inject to inject this data.

<template>
  <div>
    <h1 id="message">{{ message }}</h1>
  </div>
</template>

<script>
export default {
  inject: ['message'],
}
</script>

In this example, we use inject to inject the message data provided by the parent component and display it in the template.

Summary

The above summarizes the four common value-passing methods in Vue: props, emit, Vuex and Provide/Inject. Each value-passing method has its applicable scenarios and standard usage. Understanding these value transfer methods will help you better understand data transfer between Vue components. We can select and combine these value-passing methods according to actual needs to achieve data sharing in Vue applications.

The above is the detailed content of How many ways are there to pass values ​​in Vue?. For more information, please follow other related articles on the PHP Chinese website!