In Vue, component communication is a very critical issue. A component may need to call another component's method to implement its own functions. In this case, we need to use some technical means to achieve communication between components.
Vue provides many methods to implement communication between components, including event bus, Vuex, props, emit, etc. But when we need to call methods of other components in public methods, using these methods may become complicated and troublesome. At this time, we can use $root and $refs on the Vue instance to call other component methods.
$root and $refs are two properties of the Vue instance, which allow us to access another component from one component. $root is the root Vue instance and can access the entire Vue application. $refs is an object that contains all subcomponents with ref attributes.
First, we need to define a method in another component and add a ref attribute to this component in the template. For example:
<template> <div> <button>点击我</button> </div> </template> <script> export default { methods: { increment() { this.$emit('increment') } } } </script>
Here, we define an increment method and bind it to a button. When the button is clicked, the increment method triggers a custom event 'increment'. At the same time, we specify this component as a child node of its parent component and add a ref attribute to it.
Next, in the parent component, we can access the child component through the $refs attribute and call its method. For example:
<template> <div> <childcomponent></childcomponent> </div> </template> <script> import ChildComponent from './ChildComponent' export default { components: { ChildComponent }, created() { console.log(this.$refs.child) this.$refs.child.increment() } } </script>
Here, we create a parent component and add a child component ChildComponent in the template. At the same time, we obtain the instance of the child component through this.$refs.child and call its increment method. We call $refs in the created hook because the subcomponent has not been created yet when the mounted hook is used.
In this way, we can easily call methods of other components in public methods. We only need to obtain the corresponding component instance through $root or $refs in the public method, and call its method directly.
It should be noted that $refs is a non-responsive object, and it will only be filled when the component is rendered, so if we need to obtain the instance of the child component before the component is rendered, we can use $children Attributes.
To sum up, calling other components through $root and $refs is a very convenient and practical method. However, we need to pay attention to some details, such as whether the component has been rendered, whether there is a ref attribute, etc. This method can provide a good solution when we need to call other component methods in public methods.
The above is the detailed content of How do Vue public methods call other component methods?. For more information, please follow other related articles on the PHP Chinese website!

Yes,ReactapplicationscanbeSEO-friendlywithproperstrategies.1)Useserver-siderendering(SSR)withtoolslikeNext.jstogeneratefullHTMLforindexing.2)Implementstaticsitegeneration(SSG)forcontent-heavysitestopre-renderpagesatbuildtime.3)Ensureuniquetitlesandme

React performance bottlenecks are mainly caused by inefficient rendering, unnecessary re-rendering and calculation of component internal heavy weight. 1) Use ReactDevTools to locate slow components and apply React.memo optimization. 2) Optimize useEffect to ensure that it only runs when necessary. 3) Use useMemo and useCallback for memory processing. 4) Split the large component into small components. 5) For big data lists, use virtual scrolling technology to optimize rendering. Through these methods, the performance of React applications can be significantly improved.

Someone might look for alternatives to React because of performance issues, learning curves, or exploring different UI development methods. 1) Vue.js is praised for its ease of integration and mild learning curve, suitable for small and large applications. 2) Angular is developed by Google and is suitable for large applications, with a powerful type system and dependency injection. 3) Svelte provides excellent performance and simplicity by compiling it into efficient JavaScript at build time, but its ecosystem is still growing. When choosing alternatives, they should be determined based on project needs, team experience and project size.

KeysinReactarespecialattributesassignedtoelementsinarraysforstableidentity,crucialforthereconciliationalgorithmwhichupdatestheDOMefficiently.1)KeyshelpReacttrackchanges,additions,orremovalsinlists.2)Usingunique,stablekeyslikeIDsratherthanindicespreve

ToreducesetupoverheadinReactprojects,usetoolslikeCreateReactApp(CRA),Next.js,Gatsby,orstarterkits,andmaintainamodularstructure.1)CRAsimplifiessetupwithasinglecommand.2)Next.jsandGatsbyoffermorefeaturesbutalearningcurve.3)Starterkitsprovidecomprehensi

useState()isaReacthookusedtomanagestateinfunctionalcomponents.1)Itinitializesandupdatesstate,2)shouldbecalledatthetoplevelofcomponents,3)canleadto'stalestate'ifnotusedcorrectly,and4)performancecanbeoptimizedusinguseCallbackandproperstateupdates.

Reactispopularduetoitscomponent-basedarchitecture,VirtualDOM,richecosystem,anddeclarativenature.1)Component-basedarchitectureallowsforreusableUIpieces,improvingmodularityandmaintainability.2)TheVirtualDOMenhancesperformancebyefficientlyupdatingtheUI.

TodebugReactapplicationseffectively,usethesestrategies:1)AddresspropdrillingwithContextAPIorRedux.2)HandleasynchronousoperationswithuseStateanduseEffect,usingAbortControllertopreventraceconditions.3)OptimizeperformancewithuseMemoanduseCallbacktoavoid


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

SublimeText3 Linux new version
SublimeText3 Linux latest version

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Dreamweaver Mac version
Visual web development tools
