② Header-Component에서 다른 기능을 가진 버튼의 개수 변경

② Header-Component에서 다른 기능을 가진 버튼의 개수 변경

저는 헤더 구성 요소를 갖고 싶지만 버튼의 수와 이러한 버튼들이 트리거할 수 있는 다양한 기능을 가지고 있습니다. 예를 들어, 홈 페이지의 "visit about page", "trigger vue action A", 페이지의 "visit vuex action B" 등이 있습니다.

Vue에서 이를 달성하는 올바른 방법은 무엇입니까?

다음은 Vue 구성 요소, 슬롯 및 시맨틱 UI를 사용하는 매우 기본적인 예입니다.

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

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')

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

<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>

언급URL : https://stackoverflow.com/questions/75661200/%d0%a1hanging-number-of-buttons-with-different-functions-in-header-component