如题，结合官方文档与网络帖子，利用AI整理

Vue.js 基本组件属性与方法讲解

1. Button 按钮

主要属性

属性名	类型	默认值	说明
`type`	String	‘button’	按钮类型，可选值：‘button’、‘submit’、‘reset’
`variant`	String	‘primary’	按钮样式变体，可选值：‘primary’、‘secondary’、‘danger’、‘success’
`size`	String	‘medium’	按钮尺寸，可选值：‘small’、‘medium’、‘large’
`disabled`	Boolean	false	是否禁用按钮
`loading`	Boolean	false	是否显示加载状态
`text`	String	‘按钮’	按钮文本内容
`icon`	String	-	按钮图标

主要方法

方法名	参数	说明
`handleClick`	-	点击事件处理函数
`handleSubmit`	-	提交事件处理函数（仅当type为’submit’时有效）

事件

click: 点击事件
submit: 提交事件

使用示例

<template>
  <div>
    <BaseButton 
      variant="primary"
      size="large"
      :loading="isLoading"
      @click="handleClick"
    >
      提交
    </BaseButton>
    
    <BaseButton 
      variant="danger"
      :disabled="!canDelete"
      @click="handleDelete"
    >
      删除
    </BaseButton>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      canDelete: true
    }
  },
  methods: {
    handleClick() {
      this.isLoading = true
      // 处理逻辑
      setTimeout(() => {
        this.isLoading = false
      }, 2000)
    },
    handleDelete() {
      if (confirm('确定要删除吗？')) {
        // 删除逻辑
      }
    }
  }
}
</script>

2. Input 输入框

主要属性

属性名	类型	默认值	说明
`modelValue`	String/Number	‘’	绑定值（v-model）
`type`	String	‘text’	输入框类型
`label`	String	‘’	标签文本
`placeholder`	String	‘’	占位文本
`disabled`	Boolean	false	是否禁用
`readonly`	Boolean	false	是否只读
`required`	Boolean	false	是否必填
`maxlength`	Number	-	最大输入长度
`minlength`	Number	-	最小输入长度
`pattern`	RegExp	-	正则表达式验证
`errorMessage`	String	‘’	错误提示信息

主要方法

方法名	参数	说明
`handleInput`	event	输入事件处理
`handleFocus`	-	获得焦点事件
`handleBlur`	-	失去焦点事件
`validate`	-	验证输入内容

事件

input: 输入事件
focus: 获得焦点事件
blur: 失去焦点事件
validate: 验证事件

使用示例

<template>
  <div>
    <BaseInput
      v-model="username"
      label="用户名"
      placeholder="请输入用户名"
      required
      :pattern="/^[a-zA-Z0-9_]{4,16}$/"
      @validate="handleValidate"
    />
    
    <BaseInput
      v-model="password"
      type="password"
      label="密码"
      placeholder="请输入密码"
      required
      :errorMessage="passwordError"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      passwordError: ''
    }
  },
  methods: {
    handleValidate(isValid) {
      console.log('用户名验证结果:', isValid)
    }
  }
}
</script>

3. Form 表单

主要属性

属性名	类型	默认值	说明
`model`	Object	{}	表单数据对象
`rules`	Object	{}	验证规则
`submitText`	String	‘提交’	提交按钮文本
`labelWidth`	String/Number	‘120px’	标签宽度
`inline`	Boolean	false	是否行内表单

主要方法

方法名	参数	说明
`validate`	-	验证表单
`handleSubmit`	-	提交表单
`handleReset`	-	重置表单
`clearError`	field	清除指定字段错误

事件

submit: 表单提交事件
reset: 表单重置事件
invalid: 表单验证失败事件

使用示例

<template>
  <BaseForm
    :model="form"
    :rules="rules"
    @submit="handleSubmit"
    @invalid="handleInvalid"
  >
    <BaseInput
      v-model="form.username"
      label="用户名"
      placeholder="请输入用户名"
    />
    
    <BaseInput
      v-model="form.email"
      type="email"
      label="邮箱"
      placeholder="请输入邮箱"
    />
    
    <template #actions>
      <BaseButton type="primary" @click="$parent.handleSubmit">
        提交
      </BaseButton>
      <BaseButton type="secondary" @click="$parent.handleReset">
        重置
      </BaseButton>
    </template>
  </BaseForm>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        email: ''
      },
      rules: {
        username: {
          required: true,
          message: '请输入用户名'
        },
        email: {
          required: true,
          pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
          message: '请输入正确的邮箱格式'
        }
      }
    }
  },
  methods: {
    handleSubmit(formData) {
      console.log('表单提交:', formData)
    },
    handleInvalid(errors) {
      console.log('表单验证失败:', errors)
    }
  }
}
</script>

4. Table 表格

主要属性

属性名	类型	默认值	说明
`data`	Array	[]	表格数据
`columns`	Array	[]	列配置
`keyField`	String	‘id’	数据唯一标识字段
`emptyText`	String	‘暂无数据’	空数据提示文本
`sortKey`	String	‘’	排序字段
`sortOrder`	String	‘asc’	排序方向
`border`	Boolean	false	是否显示边框
`striped`	Boolean	false	是否斑马纹

主要方法

方法名	参数	说明
`handleSort`	key, order	处理排序
`handleSelection`	rows	处理选择
`handleRowClick`	row, index	处理行点击

事件

sort: 排序事件
selection-change: 选择变化事件
row-click: 行点击事件

使用示例

<template>
  <BaseTable
    :data="users"
    :columns="columns"
    :sort-key="sortKey"
    :sort-order="sortOrder"
    @sort="handleSort"
  >
    <template #status="{ row }">
      <span :class="row.status === 'active' ? 'status-active' : 'status-inactive'">
        {{ row.status === 'active' ? '启用' : '禁用' }}
      </span>
    </template>
    
    <template #actions="{ row }">
      <div class="action-buttons">
        <button @click="handleEdit(row)">编辑</button>
        <button @click="handleDelete(row)">删除</button>
      </div>
    </template>
  </BaseTable>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '张三', email: 'zhangsan@example.com', status: 'active' },
        { id: 2, name: '李四', email: 'lisi@example.com', status: 'inactive' }
      ],
      columns: [
        { key: 'name', title: '姓名', sortable: true },
        { key: 'email', title: '邮箱', sortable: true },
        { key: 'status', title: '状态' },
        { key: 'actions', title: '操作' }
      ],
      sortKey: '',
      sortOrder: 'asc'
    }
  },
  methods: {
    handleSort(key, order) {
      this.sortKey = key
      this.sortOrder = order
      // 处理排序逻辑
    },
    handleEdit(row) {
      console.log('编辑:', row)
    },
    handleDelete(row) {
      console.log('删除:', row)
    }
  }
}
</script>

5. Checkbox 复选框

主要属性

属性名	类型	默认值	说明
`modelValue`	Boolean/Array	false	绑定值（v-model）
`label`	String	‘’	标签文本
`disabled`	Boolean	false	是否禁用
`indeterminate`	Boolean	false	是否半选状态
`name`	String	-	表单名称

主要方法

方法名	参数	说明
`handleChange`	value	变化事件处理

事件

change: 变化事件

使用示例

<template>
  <div>
    <!-- 单个复选框 -->
    <BaseCheckbox
      v-model="agree"
      label="我同意用户协议"
      @change="handleAgreeChange"
    />
    
    <!-- 复选框组 -->
    <div class="checkbox-group">
      <BaseCheckbox
        v-for="item in hobbies"
        :key="item.value"
        v-model="selectedHobbies"
        :label="item.label"
        :value="item.value"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      agree: false,
      selectedHobbies: [],
      hobbies: [
        { value: 'reading', label: '阅读' },
        { value: 'sports', label: '运动' },
        { value: 'music', label: '音乐' }
      ]
    }
  },
  methods: {
    handleAgreeChange(checked) {
      console.log('同意状态:', checked)
    }
  }
}
</script>

6. Radio 单选框

主要属性

属性名	类型	默认值	说明
`modelValue`	String/Number/Boolean	‘’	绑定值（v-model）
`name`	String	-	表单名称
`options`	Array	[]	选项数组
`disabled`	Boolean	false	是否禁用

主要方法

方法名	参数	说明
`handleChange`	value	变化事件处理

事件

change: 变化事件

使用示例

<template>
  <div>
    <BaseRadio
      v-model="gender"
      name="gender"
      :options="genderOptions"
      @change="handleGenderChange"
    />
    
    <BaseRadio
      v-model="city"
      name="city"
      :options="cityOptions"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      gender: '',
      city: '',
      genderOptions: [
        { value: 'male', label: '男' },
        { value: 'female', label: '女' }
      ],
      cityOptions: [
        { value: 'beijing', label: '北京' },
        { value: 'shanghai', label: '上海' },
        { value: 'guangzhou', label: '广州' }
      ]
    }
  },
  methods: {
    handleGenderChange(value) {
      console.log('性别选择:', value)
    }
  }
}
</script>

7. Select 下拉选择器

主要属性

属性名	类型	默认值	说明
`modelValue`	String/Number/Boolean	‘’	绑定值（v-model）
`options`	Array	[]	选项数组
`placeholder`	String	‘请选择’	占位文本
`disabled`	Boolean	false	是否禁用
`filterable`	Boolean	false	是否可搜索
`multiple`	Boolean	false	是否多选
`clearable`	Boolean	false	是否可清空
`size`	String	‘medium’	尺寸

主要方法

方法名	参数	说明
`toggleDropdown`	-	切换下拉框显示/隐藏
`selectOption`	option	选择选项
`handleSearch`	keyword	搜索处理

事件

change: 变化事件
open: 下拉框打开事件
close: 下拉框关闭事件
clear: 清空事件

使用示例

<template>
  <div>
    <BaseSelect
      v-model="selectedCity"
      :options="cityOptions"
      placeholder="请选择城市"
      filterable
      @change="handleCityChange"
    />
    
    <BaseSelect
      v-model="selectedTags"
      :options="tagOptions"
      placeholder="请选择标签"
      multiple
      clearable
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCity: '',
      selectedTags: [],
      cityOptions: [
        { value: 'beijing', label: '北京' },
        { value: 'shanghai', label: '上海' },
        { value: 'guangzhou', label: '广州' },
        { value: 'shenzhen', label: '深圳' }
      ],
      tagOptions: [
        { value: 'vue', label: 'Vue.js' },
        { value: 'react', label: 'React' },
        { value: 'angular', label: 'Angular' }
      ]
    }
  },
  methods: {
    handleCityChange(value) {
      console.log('城市选择:', value)
    }
  }
}
</script>

8. 组件通信

Props 父传子

<!-- ParentComponent.vue -->
<template>
  <ChildComponent 
    :message="parentMessage"
    :user="currentUser"
    :is-visible="showChild"
  />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: '来自父组件的消息',
      currentUser: { name: '张三', age: 25 },
      showChild: true
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div v-if="isVisible">
    <p>{{ message }}</p>
    <p>用户名: {{ user.name }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String,
    user: Object,
    isVisible: Boolean
  }
}
</script>

Emit 子传父

<!-- ChildComponent.vue -->
<template>
  <button @click="handleClick">点击我</button>
  <input v-model="inputValue" @input="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleClick() {
      this.$emit('click', '按钮被点击了')
    },
    handleInput() {
      this.$emit('input', this.inputValue)
    }
  }
}
</script>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent 
    @click="handleChildClick"
    @input="handleChildInput"
  />
</template>

<script>
export default {
  methods: {
    handleChildClick(message) {
      console.log('收到:', message)
    },
    handleChildInput(value) {
      console.log('输入:', value)
    }
  }
}
</script>

Provide/Inject

<!-- AncestorComponent.vue -->
<template>
  <div>
    <DescendantComponent />
  </div>
</template>

<script>
export default {
  provide() {
    return {
      theme: this.theme,
      updateTheme: this.updateTheme
    }
  },
  data() {
    return {
      theme: 'dark'
    }
  },
  methods: {
    updateTheme(newTheme) {
      this.theme = newTheme
    }
  }
}
</script>

<!-- DescendantComponent.vue -->
<template>
  <div :class="theme">
    <button @click="updateTheme('light')">
      切换到亮色主题
    </button>
  </div>
</template>

<script>
export default {
  inject: ['theme', 'updateTheme']
}
</script>

Vue.js 基本组件属性与方法讲解

目录

1. Button 按钮

主要属性

主要方法

事件

使用示例

2. Input 输入框

主要属性

主要方法

事件

使用示例

3. Form 表单

主要属性

主要方法

事件

使用示例

4. Table 表格

主要属性

主要方法

事件

使用示例

5. Checkbox 复选框

主要属性

主要方法

事件

使用示例

6. Radio 单选框

主要属性

主要方法

事件

使用示例

7. Select 下拉选择器

主要属性

主要方法

事件

使用示例

8. 组件通信

Props 父传子

Emit 子传父

Provide/Inject