Describes the data communication instances between Vue components and vue Data Communication

Describes the data communication instances between Vue components and vue Data Communication

I recently used vue for projects and learned a lot, but sometimes I am patronizing projects, but I forget to find a time to sort out some of the latest new learning achievements, because I am a newbie, so there may be errors. Please point out and communicate ~~~

Data communication between parent and child components and between non-Parent and Child Components

1. Data Communication between parent and child components

Generally, the parent component transmits data to the child component using prop. Note that the child component cannot modify the data in prop. The vue specifies that the child component should prevent the data in the parent component from being tampered. When a child component transmits data to the parent component, the event triggers the event of the parent component to transmit data. (Isn't it a little difficult? Let's look at an example)

(Here I will extract the example code from a project to illustrate)

Use prop for data transmission:

// This is part of the code in the parent component. The parent component transmits data (method, dialogFormvisible) to the child component 
When using vue-devtool in chrome, you can also see related data attributes;

Of course, after the sub-component completes related operations, it takes time to change the value dialogFormVisible to false. If the sub-component is modified directly, an error is reported because the data of the parent component is affected. The value of the prop attribute cannot be modified directly in vue. You can use the event trigger function to transmit data to the parent component.


/// The parent component listens to sub-component events through @ close = "closeDialog" and @ getEmployee = "getEmployee". Once the close and getEmployee events of sub-components occur, the closeDialog and getEmployee events in the parent component are triggered. // Some codes of the parent component <div class = "add"> <el-button type = "primary" icon = "edit" @ click = "handleAdd"> add an employee </ el-button> 
In this way, data is transmitted between parent and child components;
2. data transmission between non-Parent and Child Components
Create an intermediate event bus. Implement data communication between non-Parent and Child components.

  
 
 
   
First, create an event bus. I will create a new bus. js file and register the bus.
 
 
   
Use emit and on in components to implement data communication;

  
1. bus. js File
// Bus. js, register Busimport Vue from 'vue 'export default new vue ()
2. emit trigger event
<Template> <div class = "add-task": class = "{'ishide ': isAdding}" @ click = "addtask () "> <I class =" fa-plus-circle "aria-hidden =" true "> </I> Add a task </div> </template> <script> import bus from '@/bus' export default {methods: {props: ['index'], data () {return {isAdding: false }}, addtask () {this. isAdding = true Bus. $ emit ('adding-task', this. isAdding, this. index) // The event triggered here is 'adding-task', and two parameters are passed, respectively, this. isAdding and this. index this. $ emit ('addtask ')}}}
3. Another component receives events.
// The code in the template is not displayed. The Code export default {data () // In the script is not displayed one by one. The created () {// here, The on is used to listen to the adding-task event, two parameters are received. So once the adding-task event in the above component is triggered, it will be monitored here. Bus. $ on ('adding-task', (state, index) =>{ if (this. index === index) {this. isShow = state }})}}
Disadvantages:

Sometimes there are many small child components that need to be reused on the page. To prevent the corresponding components of the listener from being affected every time a corresponding event is triggered, as shown in. My solution is to assign an index value to each sub-component of a loop;

// Here, I will pass an index value when each component is emit. The other component accepts the parameter after the on Component determines whether the index is equal to its own index, if they are equal, the corresponding data change operation is executed. Bus. $ on ('adding-task', (state, index) =>{ if (this. index === index) {this. isShow = state}
Come here today, sleepy. Vuex is also used for more complex data communication, but my current project should not be used for the time being, so I will continue to learn more about it later.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.