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

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

DDD
DDDOriginal
2023-07-03 11:23:131966browse

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.

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

#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 &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: &#39;Hello&#39;
    }
  }
}
</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 &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: &#39;&#39;
    }
  },
  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(&#39;custom-event&#39;, &#39;New Message&#39;);
    }
  }
}
</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 &#39;ChildComponent.vue&#39;;
export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: &#39;Hello&#39;
    }
  }
}
</script>

Child component:

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
  inject: [&#39;message&#39;]
}
</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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn