In my usual development, a lot of problems are to see the open action, encountered to solve. In the long run, there is a big problem, is repeatedly encountered this problem, and repeatedly to solve, because the way to solve the last time may not be remembered. It’s like you look at your code a few months ago and you’re like, oh, my God, whose code sucks. So, the best way is to summarize, and summarize.

The simplicity of Vue lies in components, and reuse between components makes Vue projects easy to maintain. Communication between components is the most important one, and there is communication between components in every project. Communication between components varies from case to case. For example, basic props and @EMIT parent-child component communication, Vuex global state management recommended for large projects, Bus communication for small projects, and so on. Next, I summarize some different component communication.

This is the pictureVueThe officialapiIn, through$parentand$childrenI can access the instance of the component and get what does the instance represent? Represents all methods and methods that can access this componentdata. Although the official said moderate use, but I chose to ignore. The next step is to think about how to get an instance of a given component.

This should be a generic approach, where you iterate to find a component instance that meets the criteria, and then retrieve the methods and data of that instance from that component instance

Note the boundary cases, such as $parent on #app yields an instance of new Vue(), $parent on that instance yields undefined, and $children on the bottom child is an empty array. $parent is an array, and $children is an object

/** * @desc to find the specified component instance * @params {String} type up or down * @params {Object} context * @params {String} componentName specifies the name of the component to find */ function findComponents (type, context, componentName) componentName) { if (['$parent', '$children'].indexOf(type) < 0) return let currentComponent = context[type] if (type === '$parent') currentComponent = [currentComponent] let designatedCom = null if (currentComponent.length) { for(const com of currentComponent) { const name = com.$options.name if (name === componentName) { designatedCom = com break } else { designatedCom = findComponents(type, com, componentName) if (designatedCom) break } } return designatedCom } }Copy the code

This method looks up and down for instances of child and parent components across components, retrieving the corresponding data and methods.

There are a few caveats to using this approach

Int currentComponent.length = 0 if (‘ parent’, ‘children’) {/ / select * from’ parent’; I don’t know why)

You can then use this method to get the component instance you specify. Of course, you may ask why or under what circumstances this method is appropriate when there are other communication methods such as Vuex. If you write a custom generic component and now your team wants to use it, but you write the values that control the state of the component in the Vuex, you are in trouble. This is probably a good time to use this method, without the need for other external dependencies. Finally, this method comes from the find component method in the iView source code. I just modified it a little bit. You can check out the iView source here.