用vue写一个选项导航栏组件，包含按钮、输入框等

下面是一个示例，展示如何使用Vue编写一个选项导航栏组件，其中包含按钮和输入框：

<template>
  <div class="navigation">
    <button v-for="(item, index) in options" :key="index" @click="handleButtonClick(item)">
      {{ item.label }}
    </button>
    <input type="text" v-model="inputValue" @input="handleInputChange" placeholder="输入框" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: '选项1', value: 1 },
        { label: '选项2', value: 2 },
        { label: '选项3', value: 3 },
      ],
      inputValue: '',
    };
  },
  methods: {
    handleButtonClick(item) {
      // 处理按钮点击事件
      console.log('点击了选项:', item);
    },
    handleInputChange() {
      // 处理输入框值变化事件
      console.log('输入框值:', this.inputValue);
    },
  },
};
</script>

<style scoped>
.navigation {
  display: flex;
}

button {
  margin-right: 10px;
}
</style>

在上面的示例中，我们使用了v-for指令遍历options数组来渲染按钮，每个按钮都绑定了点击事件。我们还使用了v-model指令将输入框的值与inputValue进行双向绑定，同时监听了输入框的input事件。

你可以根据需要修改选项的数量和内容，以及自定义按钮和输入框的样式。在父组件中使用该导航栏组件时，只需引入并放置在合适的位置即可。