Shulou(Shulou.com)05/31 Report--

This article focuses on "how to achieve data transfer between vue components", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to achieve data transfer between vue components.

(1) props attribute:

In the parent component, the data or function can be passed to the child component in the form of tag attributes of the child component, and the child component reads the data passed by the parent component through props.

Usage

The parent component passes data to the child component:

General attribute values are used to display to subcomponents

The child component passes data to the parent component

If the attribute value is a function type, it is generally used to transfer data from the child component to the parent component. The child component can modify the state data of the parent component by calling the function passed by the parent component.

Disadvantages:

Transfer between interlayer components: must be passed layer by layer (trouble)

Between sibling components: must rely on the parent component (trouble)

Note:

/ / the child component gets the value passed by the parent component props: {obj: {/ / obj is {id:'2'} type: Object}}

For the props of the reference type, we can modify the value of the property of the reference type directly in the subcomponent (for example, this.obj.id='3', will take effect), but we cannot directly change the address value stored by the reference type (for example, this.obj = {id:'3'}), we will issue a warning.

Although a child component can directly modify the state value of a parent component, it is not recommended to do so. We want all prop to form an one-way downstream binding between its parent and child prop: updates to the parent prop flow down to the child component, but not vice versa. This prevents the state of the parent component from accidentally changing from the child component, making the data flow of your application difficult to understand.

(2) vue custom event:

Method 1: bind event listeners to child component tags

How the child component communicates with the parent component

The function is similar to function props

By binding the custom event listening to the child component tag in the parent component, and then triggering the event by the child component, the method of passing data from the child component to the parent component is realized. The event name must be consistent and cannot have uppercase letters. The v-on event listener is automatically converted to all lowercase in the DOM template (because HTML is case-insensitive).

/ / method 1: bind through v-on / / method 2: trigger events through this.$emit ('delete_todo', todo) via $on () binding this.$refs.xxx.$on (' delete_todo', function (todo) {this.deleteTodo (todo)})

Not suitable for communication between interlayer components and sibling components

Method 2: listen for / distribute events through separate vm object bindings

Communication between any component (similar to pubsub)

Create a common vm object

Import Vue from 'vue'export default new Vue ()

Bind listening to the component that receives the message

Import vm from'. / vm.js'mounted () {vm.$on ('delete_todo', function (todo) {this.deleteTodo (todo)})}

In the component that sends the message, the event is triggered

Vm.$emit ('delete_todo', todo)

(3) subscribing and publishing messages (pubsub)

Communication between components of any relationship

Disadvantages: compared with vuex, management is not centralized enough

Usage:

Introduction of pubsub-js library

Subscribe to the message at the component that receives the message (subscribe)

Publish a message (publish) in the component that sent the message

(4) vuex

Multi-component sharing state (data management)

There is no limit to the relationship between components.

It is more powerful than pubsub and more suitable for vue projects.

(5) slot

Father-to-son communication

Communication is a label with data.

Note: the tag is resolved in the parent component

At this point, I believe you have a deeper understanding of "how to achieve data transfer between vue components". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.