问题

我想要一个具有不同数量的按钮和这些按钮可以触发不同功能的 Header 组件，例如，在主页上是 "访问关于页面" 和 "触发 Vuex 动作 A"，在关于页面上是 "访问主页" 和 "触发 Vuex 动作 B"。在Vue中实现这个的正确方法是什么？

答案1

得分: 0

以下是已翻译的内容：

这是一个使用Vue [组件][1]、[插槽][2]和[Semantic UI][3]的非常基本的示例。

    <my-menu>
      <menu-item header>
        <a href="#">Home</a>
      </menu-item>
      <menu-item @click="gotoAboutUs()">
        About Us
      </menu-item>
    </my-menu>

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    const { createApp, ref } = Vue

    const MyMenu = {
      template: `<div class="ui menu"><slot></slot></div>` 
    }

    const MenuItem = {
      props: {
        header: { type: Boolean },
        right: { type: Boolean }
      },
      template: `<div :class="['item', header ? 'header' : '', right ? 'right' : '']"><slot></slot></div>` 
    }

    const App = {
      components: {
        MyMenu, MenuItem
      },
      methods: {
       gotoAboutUs: () => alert('About Us')
      }
    }

    const app = createApp(App)
    app.mount('#app')

<!-- language: lang-css -->

    #app { line-height: 1.75; }
    [v-cloak] { display: none; }

<!-- language: lang-html -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css">
    <div id="app" v-cloak>
    <my-menu>
      <menu-item header>
        <a href="#">Home</a>
      </menu-item>
      <menu-item @click="gotoAboutUs()">
        About Us
      </menu-item>
      <menu-item right>
         <div class="ui action input">
          <input type="text" placeholder="Navigate to...">
          <div class="ui button">Go</div>
        </div>
      </menu-item>
    </my-menu>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<!-- end snippet -->

注意：以上内容已经翻译，不包括代码部分。
<details>
<summary>英文:</summary>
Here is a very basic example using Vue [Components][1], [Slots][2] and [Semantic UI][3].
&lt;my-menu&gt;
&lt;menu-item header&gt;
&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;/menu-item&gt;
&lt;menu-item @click=&quot;gotoAboutUs()&quot;&gt;
About Us
&lt;/menu-item&gt;
&lt;/my-menu&gt;
&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
&lt;!-- language: lang-js --&gt;
const { createApp, ref } = Vue
const MyMenu = {
template: `&lt;div class=&quot;ui menu&quot;&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/div&gt;` 
}
const MenuItem = {
props: {
header: { type: Boolean },
right: { type: Boolean }
},
template: `&lt;div :class=&quot;[&#39;item&#39;, header ? &#39;header&#39; : &#39;&#39;, right ? &#39;right&#39; : &#39;&#39;]&quot;&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/div&gt;` 
}
const App = {
components: {
MyMenu, MenuItem
},
methods: {
gotoAboutUs: () =&gt; alert(&#39;About Us&#39;)
}
}
const app = createApp(App)
app.mount(&#39;#app&#39;)
&lt;!-- language: lang-css --&gt;
#app { line-height: 1.75; }
[v-cloak] { display: none; }
&lt;!-- language: lang-html --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css&quot;&gt;
&lt;div id=&quot;app&quot; v-cloak&gt;
&lt;my-menu&gt;
&lt;menu-item header&gt;
&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
&lt;/menu-item&gt;
&lt;menu-item @click=&quot;gotoAboutUs()&quot;&gt;
About Us
&lt;/menu-item&gt;
&lt;menu-item right&gt;
&lt;div class=&quot;ui action input&quot;&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;Navigate to...&quot;&gt;
&lt;div class=&quot;ui button&quot;&gt;Go&lt;/div&gt;
&lt;/div&gt;
&lt;/menu-item&gt;
&lt;/my-menu&gt;
&lt;/div&gt;
&lt;script src=&quot;https://unpkg.com/vue@3/dist/vue.global.prod.js&quot;&gt;&lt;/script&gt;
&lt;!-- end snippet --&gt;
[1]: https://vuejs.org/guide/essentials/component-basics.html
[2]: https://vuejs.org/guide/components/slots.html
[3]: https://semantic-ui.com/
</details>