vue常用组件有哪些

1. 基础组件

Vue 提供了一些常用的基础组件，可以方便我们快速搭建页面。常用的基础组件包括：

<template>
  <div>
    <input type="text" v-model="inputValue">
    <button @click="handleAdd">添加</button>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

2. 表单组件

表单组件是开发中常用的组件，可以帮助我们方便地处理用户输入的数据。常用的表单组件包括：

<template>
  <form @submit.prevent="handleSubmit">
    <div class="form-item">
      <label>姓名</label>
      <input type="text" v-model="name">
    </div>
    <div class="form-item">
      <label>年龄</label>
      <input type="number" v-model="age">
    </div>
    <button type="submit">提交</button>
  </form>
</template>

3. 列表组件

列表组件是可重用的组件，可以帮助我们轻松地展示列表数据。常见的列表组件包括：

<template>
  <div>
    <h3>所有文章列表</h3>
    <ul>
      <li v-for="(article, index) in articles" :key="index">
        <a :href="article.link">{{article.title}}</a>
      </li>
    </ul>
  </div>
</template>

4. 对话框组件

对话框组件是用于显示弹窗或对话框的组件，可以帮助我们方便地提示用户进行一些操作。常见的对话框组件包括：

<template>
  <div>
    <button @click="showModal">打开对话框</button>
    <Dialog v-model="show" :title="title">
      <div>对话框内容</div>
    </Dialog>
  </div>
</template>

<script>
  import Dialog from 'components/Dialog';
  export default {
    data() {
      return {
        show: false,
        title: '对话框标题',
      };
    },
    components: {
      Dialog,
    },
    methods: {
      showModal() {
        this.show = true;
      },
    },
  };
</script>