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 prop
characteristic transfer.
Promise
The old rules, prior to use we should first understand how to use and what constraints are:
Subassemblies
props
defined to pass a variable nameNaming the variable name with components
Pass the parent component values required with dashes named
Use
v-bind
passaged 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 teamList
variable, then we can through this component this
using the variables (with data
data).
By value
Passaged value within parent components:
<template>
<div>
<child v-bind:teamList="teamList"></child>
</div>
</template>
Parent component used v-bind
to transfer data to go on.
The data is transmitted to the sub-assembly is so simple, and essentially the data
same, but as used herein, alone prop
characteristics to distinguish them.
Note the need to:
- By
prop
array is passed down feature is "one-way" bound to an array parent component update will affect the sub-components. Therefore not recommended subassembly ofprop
values 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 hack
processing is performed manner.
Reverse transfer subassembly
Mentioned above, the proposed changes are not in the sub-assembly props
data. 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?
By custom events, child component calls
this.$emit('事件名', 参数)
Use
v-model
, assemblymodel
options andinput
event simulation toinput
control the value of the parent components updated.sync
Modifiers 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-on
event name is bound submitForm
instead 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