What are the ways to pass values ​​in vue components?

Vue component value transfer method: 1. Use props to pass data. The parent component passes the data to the child component through HTML attributes, and the child component receives the passed data through props; 2. Use $emit Trigger events to transfer data. The sub-component uses $emit to trigger custom events. The parent component uses v-on to listen to the sub-component custom events. 3. Use provide/inject to transfer values ​​across levels. The parent component provides data through provide, and the sub-component Use inject to receive data.

#The operating environment of this tutorial: Windows 10 system, dell g3 computer.

Value transfer between Vue components can be achieved in three ways: props, $emit and provide/inject.

Use props to pass data:

Pass data to the child component through HTML attributes in the parent component. Child components receive data passed by parent components through props.

Parent component:

<template>
  <div>
    <ChildComponent :message="message"/>
  </div>
</template>
<script>
import ChildComponent from 'ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello'
    }
  }
}
</script>

Child component:

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
  props: {
    message: String
  }
}
</script>

Use $emit to trigger events to pass data:

In child components Use $emit to trigger custom events and pass the data to be passed as parameters. The parent component uses v-on to listen to the custom events of the child component and obtain the passed data.

Parent component:

<template>
  <div>
    <ChildComponent v-on:custom-event="updateData"/>
  </div>
</template>
<script>
import ChildComponent from 'ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    updateData(data) {
      this.message = data;
    }
  }
}
</script>

Child component:

<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  methods: {
    updateMessage() {
      this.$emit('custom-event', 'New Message');
    }
  }
}
</script>

Use provide/inject for cross-level value transfer:

In the parent Provide data through provide in the component, and then use inject to receive the data in the child component.

Parent component:

<template>
  <div>
    <ChildComponent />
  </div>
</template>
<script>
import ChildComponent from 'ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello'
    }
  }
}
</script>

Child component:

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

The above are the three ways for Vue components to pass values. According to specific scenarios and needs, you can choose a suitable method to transfer data between components.

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