Implementation method of custom global components in VUE


Sometimes we are doing development, you want to write a plugin and you can use your plug-in, that is very strong. Today, I solved a long-term troubled question, and now I record it for future reference.

The knowledge point is that the plugin in the official website of Vue.js

The method is as follows:

First I have encountered the problem is I custom components need to be called multiple times in other components in the project, and my previous solution is simple, where is it to be referenced. This undoubtedly adds many code repeats.

At some of the UI frameworks using Vue.js, it is noted that only the IMPORT plugin in the entrance file of the project is only Vue.use (‘plug-in’). This will use the components and methods in this frame in the entire project.

After receiving the information, the custom component needs to provide an install method

 Import SideBlockComponent from './sideblock'const defaultcomponentname =' Sidebar'constName Sidebar = {install (Vue, options = {}) {const componentName = options.componentName || defaultComponentName // optional component name Vue.component (componentName, sideblockComponent)}} export default Sidebar   
Introduce yourself to write a good component, then create an object and contain an install method and use

Vue.ComponENT () method is registered as a VUE global component, and finally Export Default exports this object.

The most critical steps to this are already made, and next is the most important step.

We need to introduce the components just do in the entrance file of the project, and use the plugin by

Vue.use (introduced components).
At this point, a global VUE component is a good. We can also trigger the method in the component through

Vue. $ Emit ()

Vue. $ Emit () , but recently found that the methods in their components are generally passed when using the Element UI. Vue. $ REFS () to trigger. The specific reason is left behind to do research.

New Vue ({EL: "#app", methods: {add: function () {THIS . $ refs.input1.Value = "22"; ///this. $$$$}}})
  General Speaking, get the DOM element, need Document.QuerySelector (". Input1") to get this DOM node and then get the value of Input1.  But after using the REF binding, we don't need to get the DOM node, bind INPUT1 directly on the INPUT, and then call it in the $ REFS.   then in JavaScriptThis is called: this. $ Refs.input1 can reduce the consumption of the DOM node can be reduced 

The above is the full content of this article, hope This article has a certain reference value for everyone’s learning or work. If you have any questions, you can leave a message, thank you for your support of Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment