访问Vue3中另一个组件中的函数，使用组合API。

huangapple
go评论107阅读模式
英文:

Access to a function in another component in Vue3 with composition API

问题

Sure, here's the translation of the provided content:

如何从子组件中访问父组件中的函数？
我想要在子组件中点击一个按钮，这个按钮应该调用父组件中的一个函数。

我有一个 Headline.vue 组件，其中有一个名为 LoadLogin 的 click() 方法：

  1. <template>
  2.   <div>
  3.     <header>
  4.       <h2>my-travel</h2>
  5.       <div @click="navStatus" id="hamburger" class="hamburger-icon-container">
  6.         <span class="hamburger-icon"></span>
  7.       </div>
  8.       <nav id="menue">
  9.         <ul>
  10.           <li @click="homeMenue"><a href="#home">Home</a></li>
  11.           <li @click="loadLogin"><a href="#Login">Login</a></li>
  12.           <li><a href="#about">about</a></li>
  13.         </ul>
  14.       </nav>
  15.     </header>
  16.   </div>  
  17. </template>
  19. <!-- ############################################################-->
  21. <script setup>
  22. const homeMenue = () => {
  23.   console.log("Home")
  24. }
  26. const navStatus = () => {
  27.   if (document.body.classList.contains('hamburger-active')) {
  28.     document.body.classList.remove('hamburger-active');   
  29.     document.getElementById("menue").classList.remove("closeMenue");
  30.   } 
  31.   else {
  32.     console.log("open");
  33.     document.getElementById("menue").classList.add("closeMenue");
  34.     document.body.classList.add('hamburger-active');
  35.   }
  36. }
  37. </script>

我的父组件 App.vue 有一个名为 loadLogin() 的函数：

  1. <template> 
  2.   <div>
  3.     <HeadLine/>
  4.     <hr/>      
  5.     <div class="content">
  6.       <LoginUser class="login"/>
  7.       <ContentPicture class="contentPicture"/>
  8.     </div>
  9.   </div>
  10. </template>
  12. <script setup>
  13. import HeadLine from '@/components/HeadLine.vue'
  14. import ContentPicture from '@/components/ContentPicture.vue'
  15. import LoginUser from '@/components/LoginUser.vue'
  17. const loadLogin = () => {
  18.     console.log("Login");
  19.     const element = document.querySelector('.login');
  20.     element.style.display = 'flex';
  21. }
  22. </script>
  24. <style>
  25. body, hr {
  26.   margin: 0em;
  27. }
  29. .content {
  30.   position: absolute;
  31.   top: 60px;
  32.   margin: 1em;
  33.   z-index: -100;
  34. }
  36. .login {
  37.   display: none;
  38. }
  39. </style>

This should provide the translated content you requested.

英文:

How can i access to a function in Parent Component from a chield component?
I want to click a button in chield component, which should call a function which is in the Parent component.

I have a Headline.vue component which has a click() methode calles LoadLogin:

  1. &lt;template&gt;
  2.   &lt;div&gt;
  3.     &lt;header&gt;
  4.       &lt;h2&gt;my-travel&lt;/h2&gt;
  5.       &lt;div @click=&quot;navStatus&quot; id=&quot;hamburger&quot; class=&quot;hamburger-icon-container&quot;&gt;
  6.         &lt;span class=&quot;hamburger-icon&quot;&gt;&lt;/span&gt;
  7.       &lt;/div&gt;
  8.       &lt;nav id=&quot;menue&quot;&gt;
  9.         &lt;ul&gt;
  10.           &lt;li @click=&quot;homeMenue&quot; &gt;&lt;a href=&quot;#home&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
  11.           &lt;li @click=&quot;loadLogin&quot;&gt;&lt;a href=&quot;#Login&quot;&gt;Login&lt;/a&gt;&lt;/li&gt;
  12.           &lt;li&gt;&lt;a href=&quot;#about&quot;&gt;about&lt;/a&gt;&lt;/li&gt;
  13.         &lt;/ul&gt;
  14.       &lt;/nav&gt;
  15.     &lt;/header&gt;
  16.   &lt;/div&gt;  
  17. &lt;/template&gt;
  19. &lt;!-- ############################################################--&gt;
  22. &lt;script setup&gt;
  24. const homeMenue = () =&gt; {
  25.   console.log(&quot;Home&quot;)
  26. }
  28. const navStatus = () =&gt; {
  29.   if (document.body.classList.contains(&#39;hamburger-active&#39;)) {
  30.     document.body.classList.remove(&#39;hamburger-active&#39;);   
  31.     document.getElementById(&quot;menue&quot;).classList.remove(&quot;closeMenue&quot;);
  32.  } 
  33.   else {
  34.     console.log(&quot;open&quot;);
  35.     document.getElementById(&quot;menue&quot;).classList.add(&quot;closeMenue&quot;);
  36.     document.body.classList.add(&#39;hamburger-active&#39;);
  37.  }
  38. }
  39. &lt;/script&gt;

My Parent Component App.vue has a function called loadLogin():

  1. &lt;template&gt; 
  2.   &lt;div&gt;
  3.     &lt;HeadLine/&gt;
  4.     &lt;hr/&gt;      
  5.     &lt;div class=&quot;content&quot;&gt;
  6.       &lt;LoginUser class=&quot;login&quot;/&gt;
  7.     &lt;ContentPicture class=&quot;contentPicture&quot;/&gt;
  8.     &lt;/div&gt;
  9.   &lt;/div&gt;
  10. &lt;/template&gt;
  12. &lt;script setup&gt;
  14. import HeadLine from &#39;@/components/HeadLine.vue&#39;
  15. import ContentPicture from &#39;@/components/ContentPicture.vue&#39;
  16. import LoginUser from &#39;@/components/LoginUser.vue&#39;
  18. const loadLogin = () =&gt; {
  20.     console.log(&quot;Login&quot;);
  21.     const element = document.querySelector(&#39;.login&#39;);
  22.     element.style.display = &#39;flex&#39;;
  23. }
  25. &lt;/script&gt;
  27. &lt;style&gt;
  29. body, hr {
  30.   margin: 0em;
  31. }
  33. .content {
  34.   position: absolute;
  35.   top: 60px;
  36.   margin: 1em;
  37.   z-index: -100;
  38. }
  40. .login {
  41. display: none
  42. }
  44. &lt;/style&gt;

答案1

得分: 1

这通常通过从子组件中触发事件并在父组件中监听该事件来处理。在Vue文档中有描述，可以参考这里。

子组件：

  1. &lt;li @click=&quot;$emit(&#39;login&#39;)&quot;&gt;&lt;a href=&quot;#Login&quot;&gt;Login&lt;/a&gt;&lt;/li&gt;

父组件（我假设子组件是&lt;HeadLine /&gt;）：

  1. &lt;HeadLine @login=&quot;loadLogin&quot; /&gt;

另外，需要注意的是，使用document接口与Vue一起使用的情况非常少，我看到你正在大量使用它（querySelector、getElement、classList等）。我建议仔细阅读Vue文档，以充分利用框架来实现你想要的功能，因为Vue的文档非常好！

英文:

This is most commonly handled by emitting an event from the child and listening to it on the parent. It's described here in the Vue documentation.

Child component:

  1. &lt;li @click=&quot;$emit(&#39;login&#39;)&quot;&gt;&lt;a href=&quot;#Login&quot;&gt;Login&lt;/a&gt;&lt;/li&gt;

Parent component (I assume the child component is &lt;HeadLine /&gt;):

  1. &lt;HeadLine @login=&quot;loadLogin&quot; /&gt;

On a side note, there are very few situations you need to use the document interface with Vue, which I see you're doing a lot of (querySelector, getElement, classList, etc.). I recommend thoroughly reading the Vue docs to learn how to take full advantage of the framework to do what you want, as the documentation is quite good!

huangapple
  • 本文由 发表于 2023年6月15日 08:20:31
  • 转载请务必保留本文链接：https://go.coder-hub.com/76478338.html
  • composable
  • html
  • javascript
  • vue-component
  • vuejs3
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定