Shallow depth into the Vue: data transfer subassembly

Previous understanding of the components of the concept of place and in use need to pay attention. In the face of complex logic needed to split a single component will inevitably encounter the problem of data transfer between father and son assemblies. Then take a look at what we agreed to follow during data transfer between the father and components, as well as pay attention to what the problem.

How to transfer

Transmitted to the parent sub-assembly during assembly, using a propcharacteristic transfer.

Promise

The old rules, prior to use we should first understand how to use and what constraints are:

1. Subassemblies propsdefined to pass a variable name

2. Naming the variable name with components

3. Pass the parent component values required with dashes named

4. Use v-bindpassaged value

definition

In the first subassembly defined:

// Child.vue

export default {
    name: 'child'
    props: ['teamList']
}

As used herein, the camelCasing , should pay attention to when the converted value is transmitted with dashes named .

We define a teamListvariable, then we can through this component thisusing the variables (with datadata).

By value

Passaged value within parent components:

<template>
    <div>
        <child v-bind:teamList="teamList"></child>
    </div>
</template>

Parent component used v-bindto transfer data to go on.

The data is transmitted to the sub-assembly is so simple, and essentially the datasame, but as used herein, alone propcharacteristics to distinguish them.

Note the need to:

• By proparray is passed down feature is "one-way" bound to an array parent component update will affect the sub-components. Therefore not recommended subassembly of propvalues characteristic is modified

When you pass the time of Js in passing an object and array references! Thus: When the object to modify the parent subassembly passed down assembly / array can affect the status of the parent assembly

This characteristic advantages and disadvantages, in some cases where a similar hackprocessing is performed manner.

Reverse transfer subassembly

Mentioned above, the proposed changes are not in the sub-assembly propsdata. Then when the parent component needs to be some kind of feedback when how to do it?

Now we assume that the components have a login pop-up box, by way of sub-assemblies called, when we log on how successful the notification parent component to make the appropriate response?

1. By custom events, child component calls this.$emit('事件名', 参数)

2. Use v-model, assembly modeloptions and inputevent simulation to inputcontrol the value of the parent components updated

3. .syncModifiers a "two-way binding"

Here only the first approach, because the latter two have not used a few times when the birds o (╯ □ ╰) o

emit use agreement

• Event name naming the same assembly

• Custom event on the binding of the parent component sub-assemblies, must fully match the event name, when used here, unlike the components and sub-assemblies are used in a dash-separated name , but the exact match .

Less agreed, and the main attention is the use of different components, the name needs to match exactly.

emit use

First we define the sub-assembly event, said to be defined, as it is called. Because it is a child component calls directly in a certain logic emit:

// child.vue

export default {
    methods: {
        submit() {
            this.$emit('submitForm', this.data)
        }
    }
}

Here we define a custom event name is invoked submitForm, then the use of the parent component:

<!-- parent.vue -->

<template>
    <div>
        <child v-on:submitForm="submit"></child>
    </div>
</template>

<script>
export default {
    methods: {
        submit(data) {
            // 处理逻辑
        }
    }
}
</script>

Here you can see when in use, v-onevent name is bound submitForminstead submit-form.

It is important to note.

Written on the back

This small piece of content, because the next entry will be published with the project practices to better demonstrate their use. At the same time, the beginner also do not recommend too much attention on the usage diversity.

In practice, learn and grow