Vue 框架的组件模块之基础 UI 组件深入分析(一)

_一条咸鱼_2025-04-01 10:19

Vue 框架的组件模块之基础 UI 组件深入分析

一、引言

1.1 Vue 框架简介

Vue 是一款用于构建用户界面的渐进式 JavaScript 框架，由尤雨溪开发。它采用自底向上增量式开发的设计，使得开发者可以根据项目的需求灵活选择使用 Vue 的不同功能。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。同时，当与现代化的工具链以及各种支持类库结合使用时，Vue 也能为复杂的单页面应用提供驱动。

1.2 基础 UI 组件的重要性

在 Vue 项目中，基础 UI 组件是构建用户界面的基石。它们为开发者提供了一系列可复用的、标准化的界面元素，如按钮、输入框、下拉框等。这些组件不仅能提高开发效率，减少重复劳动，还能保证项目界面的一致性和美观性。通过合理使用基础 UI 组件，开发者可以快速搭建出功能完善、用户体验良好的应用程序。

1.3 本文目标

本文将深入分析 Vue 框架中基础 UI 组件的实现原理、使用方法和源码细节。通过详细的代码示例和源码解读，帮助开发者全面了解如何在 Vue 项目中创建、定制和使用基础 UI 组件，以及如何处理组件之间的交互和状态管理。同时，还会对基础 UI 组件的性能优化和兼容性问题进行探讨，为开发者在实际项目中使用基础 UI 组件提供参考。

二、按钮组件

2.1 简单按钮组件的实现

首先，我们来实现一个简单的按钮组件。以下是一个基本的 Vue 按钮组件代码：

vue

javascript 复制代码 
<template>
  <!-- 按钮元素，绑定点击事件 -->
  <button @click="handleClick">{{ label }}</button>
</template>

<script>
export default {
  // 定义组件的属性
  props: {
    // 按钮的文本标签
    label: {
      type: String,
      default: 'Click me'
    }
  },
  methods: {
    // 处理按钮点击事件的方法
    handleClick() {
      // 触发自定义事件，将点击事件传递给父组件
      this.$emit('click');
    }
  }
};
</script>

<style scoped>
button {
  /* 设置按钮的基本样式 */
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  /* 鼠标悬停时的样式 */
  background-color: #0056b3;
}
</style>
2.1.1 代码解释

  • 模板部分 ：使用 <button> 元素渲染按钮，并通过 @click 指令绑定 handleClick 方法。按钮的文本内容由 label 属性决定。

  • 脚本部分：

    • props：定义了一个 label 属性，用于接收按钮的文本标签，默认值为 'Click me'。
    • methods：定义了 handleClick 方法，该方法在按钮被点击时触发，并通过 this.$emit('click') 触发一个自定义的 click 事件，将点击事件传递给父组件。

  • 样式部分 ：使用 scoped 属性确保样式只作用于当前组件。设置了按钮的基本样式和鼠标悬停时的样式。

2.2 按钮组件的使用

在父组件中使用上述按钮组件的示例代码如下：

vue

javascript 复制代码 
<template>
  <div>
    <!-- 使用自定义按钮组件，设置标签并监听点击事件 -->
    <MyButton label="Submit" @click="onButtonClick" />
  </div>
</template>

<script>
// 引入自定义按钮组件
import MyButton from './MyButton.vue';

export default {
  // 注册组件
  components: {
    MyButton
  },
  methods: {
    // 处理按钮点击事件的方法
    onButtonClick() {
      console.log('Button clicked!');
    }
  }
};
</script>
2.2.1 代码解释

  • 模板部分 ：使用 <MyButton> 组件，并通过 label 属性设置按钮的文本标签为 'Submit'。同时，通过 @click 指令监听按钮的点击事件，并调用 onButtonClick 方法。

  • 脚本部分：

    • import：引入自定义按钮组件 MyButton。
    • components：注册 MyButton 组件，使其可以在模板中使用。
    • methods：定义了 onButtonClick 方法，当按钮被点击时，会在控制台输出 'Button clicked!'。

2.3 按钮组件的扩展

我们可以对按钮组件进行扩展，添加更多的功能和样式。例如，添加不同的按钮类型（如主要按钮、次要按钮）和禁用状态。以下是扩展后的按钮组件代码：

vue

javascript 复制代码 
<template>
  <!-- 按钮元素，绑定点击事件和禁用状态 -->
  <button @click="handleClick" :disabled="isDisabled" :class="buttonClasses">
    {{ label }}
  </button>
</template>

<script>
export default {
  // 定义组件的属性
  props: {
    // 按钮的文本标签
    label: {
      type: String,
      default: 'Click me'
    },
    // 按钮的类型，可选值为 'primary' 或 'secondary'
    type: {
      type: String,
      default: 'primary',
      validator: value => ['primary', 'secondary'].includes(value)
    },
    // 按钮是否禁用
    isDisabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 计算按钮的类名
    buttonClasses() {
      return {
        'btn': true,
        'btn-primary': this.type === 'primary',
        'btn-secondary': this.type === 'secondary',
        'disabled': this.isDisabled
      };
    }
  },
  methods: {
    // 处理按钮点击事件的方法
    handleClick() {
      if (!this.isDisabled) {
        // 触发自定义事件，将点击事件传递给父组件
        this.$emit('click');
      }
    }
  }
};
</script>

<style scoped>
.btn {
  /* 设置按钮的基本样式 */
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-primary {
  /* 主要按钮的样式 */
  background-color: #007BFF;
  color: white;
}

.btn-primary:hover {
  /* 主要按钮鼠标悬停时的样式 */
  background-color: #0056b3;
}

.btn-secondary {
  /* 次要按钮的样式 */
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  /* 次要按钮鼠标悬停时的样式 */
  background-color: #5a6268;
}

.disabled {
  /* 禁用按钮的样式 */
  background-color: #ccc;
  cursor: not-allowed;
}
</style>
2.3.1 代码解释

  • 模板部分 ：在 <button> 元素上添加了 :disabled 绑定，根据 isDisabled 属性决定按钮是否禁用。同时，通过 :class 绑定 buttonClasses 计算属性，动态设置按钮的类名。

  • 脚本部分：

    • props：新增了 type 和 isDisabled 属性，分别用于设置按钮的类型和禁用状态。
    • computed：定义了 buttonClasses 计算属性，根据 type 和 isDisabled 属性返回不同的类名。
    • methods：在 handleClick 方法中，添加了对 isDisabled 属性的判断，只有当按钮未禁用时才触发自定义的 click 事件。

  • 样式部分：添加了不同类型按钮和禁用按钮的样式。

2.4 按钮组件的源码分析

在 Vue 中，组件的实现基于虚拟 DOM 和响应式原理。当组件的属性或状态发生变化时，Vue 会自动更新虚拟 DOM，并将更新应用到实际的 DOM 上。以下是对按钮组件源码的详细分析：

2.4.1 组件初始化

当创建一个按钮组件实例时，Vue 会执行以下步骤：

  1. 解析模板 ：将 <template> 部分的 HTML 代码解析为虚拟 DOM 树。
  2. 初始化数据 ：根据 props 定义初始化组件的属性，以及 data 选项（如果有）初始化组件的状态。
  3. 绑定事件 ：将 @click 等指令绑定到相应的方法上。
  4. 计算属性和方法 ：初始化 computed 和 methods 选项中的计算属性和方法。
2.4.2 响应式更新

当按钮组件的属性或状态发生变化时，Vue 的响应式系统会检测到这些变化，并触发以下操作：

  1. 更新虚拟 DOM：根据变化更新虚拟 DOM 树。
  2. 对比差异：将新的虚拟 DOM 树与旧的虚拟 DOM 树进行对比，找出差异。
  3. 更新实际 DOM：将差异应用到实际的 DOM 上，实现页面的更新。
2.4.3 事件处理

当按钮被点击时，会触发 handleClick 方法。在该方法中，通过 this.$emit('click') 触发一个自定义的 click 事件。父组件可以通过 @click 指令监听这个事件，并执行相应的操作。

三、输入框组件

3.1 简单输入框组件的实现

以下是一个简单的 Vue 输入框组件代码：

vue

javascript 复制代码 
<template>
  <!-- 输入框元素，绑定输入事件和值 -->
  <input type="text" v-model="inputValue" @input="handleInput" />
</template>

<script>
export default {
  // 定义组件的属性
  props: {
    // 输入框的初始值
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 输入框的内部值
      inputValue: this.value
    };
  },
  watch: {
    // 监听输入框内部值的变化
    inputValue(newValue) {
      // 触发自定义事件，将新值传递给父组件
      this.$emit('input', newValue);
    }
  },
  methods: {
    // 处理输入事件的方法
    handleInput() {
      // 触发自定义事件，将输入事件传递给父组件
      this.$emit('input', this.inputValue);
    }
  }
};
</script>

<style scoped>
input {
  /* 设置输入框的基本样式 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>
3.1.1 代码解释

  • 模板部分 ：使用 <input> 元素渲染输入框，并通过 v-model 指令双向绑定 inputValue。同时，通过 @input 指令绑定 handleInput 方法。

  • 脚本部分：

    • props：定义了一个 value 属性，用于接收输入框的初始值。
    • data：初始化 inputValue 为 this.value，作为输入框的内部值。
    • watch：监听 inputValue 的变化，当值发生变化时，通过 this.$emit('input', newValue) 触发一个自定义的 input 事件，将新值传递给父组件。
    • methods：定义了 handleInput 方法，该方法在输入框输入时触发，并通过 this.$emit('input', this.inputValue) 触发自定义的 input 事件。

  • 样式部分：设置了输入框的基本样式。

3.2 输入框组件的使用

在父组件中使用上述输入框组件的示例代码如下：

vue

javascript 复制代码 
<template>
  <div>
    <!-- 使用自定义输入框组件，绑定值和监听输入事件 -->
    <MyInput v-model="inputText" @input="onInputChange" />
    <p>Input value: {{ inputText }}</p>
  </div>
</template>

<script>
// 引入自定义输入框组件
import MyInput from './MyInput.vue';

export default {
  // 注册组件
  components: {
    MyInput
  },
  data() {
    return {
      // 输入框的值
      inputText: ''
    };
  },
  methods: {
    // 处理输入事件的方法
    onInputChange(newValue) {
      this.inputText = newValue;
    }
  }
};
</script>
3.2.1 代码解释

  • 模板部分 ：使用 <MyInput> 组件，并通过 v-model 指令双向绑定 inputText。同时，通过 @input 指令监听输入框的输入事件，并调用 onInputChange 方法。

  • 脚本部分：

    • import：引入自定义输入框组件 MyInput。
    • components：注册 MyInput 组件，使其可以在模板中使用。
    • data：初始化 inputText 为空字符串。
    • methods：定义了 onInputChange 方法，当输入框的值发生变化时，将新值赋给 inputText。

3.3 输入框组件的扩展

我们可以对输入框组件进行扩展，添加更多的功能和样式。例如，添加输入验证和错误提示。以下是扩展后的输入框组件代码：

vue

javascript 复制代码 
<template>
  <div>
    <!-- 输入框元素，绑定输入事件和值 -->
    <input type="text" v-model="inputValue" @input="handleInput" :class="{ 'is-invalid': hasError }" />
    <!-- 错误提示信息 -->
    <p v-if="hasError" class="error-message">{{ errorMessage }}</p>
  </div>
</template>

<script>
export default {
  // 定义组件的属性
  props: {
    // 输入框的初始值
    value: {
      type: String,
      default: ''
    },
    // 输入验证规则
    rules: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 输入框的内部值
      inputValue: this.value,
      // 是否有错误
      hasError: false,
      // 错误信息
      errorMessage: ''
    };
  },
  watch: {
    // 监听输入框内部值的变化
    inputValue(newValue) {
      // 验证输入值
      this.validateInput(newValue);
      // 触发自定义事件，将新值传递给父组件
      this.$emit('input', newValue);
    }
  },
  methods: {
    // 处理输入事件的方法
    handleInput() {
      // 验证输入值
      this.validateInput(this.inputValue);
      // 触发自定义事件，将输入事件传递给父组件
      this.$emit('input', this.inputValue);
    },
    // 验证输入值的方法
    validateInput(value) {
      this.hasError = false;
      this.errorMessage = '';
      // 遍历验证规则
      for (const rule of this.rules) {
        if (!rule.validate(value)) {
          this.hasError = true;
          this.errorMessage = rule.message;
          break;
        }
      }
    }
  }
};
</script>

<style scoped>
input {
  /* 设置输入框的基本样式 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.is-invalid {
  /* 输入框有错误时的样式 */
  border-color: red;
}

.error-message {
  /* 错误提示信息的样式 */
  color: red;
  font-size: 12px;
}
</style>
3.3.1 代码解释

  • 模板部分 ：在 <input> 元素上添加了 :class 绑定，根据 hasError 属性决定是否添加 is-invalid 类名。同时，通过 v-if 指令控制错误提示信息的显示。

  • 脚本部分：

    • props：新增了 rules 属性，用于接收输入验证规则。

    • data：新增了 hasError 和 errorMessage 状态，分别用于表示是否有错误和错误信息。

    • watch：在 inputValue 变化时，调用 validateInput 方法进行输入验证，并触发自定义的 input 事件。

    • methods：

      • handleInput：在输入时调用 validateInput 方法进行输入验证，并触发自定义的 input 事件。
      • validateInput：遍历 rules 数组，对输入值进行验证。如果验证不通过，设置 hasError 为 true，并设置 errorMessage。

  • 样式部分：添加了输入框有错误时的样式和错误提示信息的样式。

3.4 输入框组件的源码分析

输入框组件的源码实现与按钮组件类似，也基于虚拟 DOM 和响应式原理。以下是对输入框组件源码的详细分析：

3.4.1 组件初始化

当创建一个输入框组件实例时，Vue 会执行以下步骤：

  1. 解析模板 ：将 <template> 部分的 HTML 代码解析为虚拟 DOM 树。
  2. 初始化数据 ：根据 props 定义初始化组件的属性，以及 data 选项初始化组件的状态。
  3. 绑定事件 ：将 @input 等指令绑定到相应的方法上。
  4. 计算属性和方法 ：初始化 computed 和 methods 选项中的计算属性和方法。
3.4.2 响应式更新

当输入框组件的属性或状态发生变化时，Vue 的响应式系统会检测到这些变化，并触发以下操作：

  1. 更新虚拟 DOM：根据变化更新虚拟 DOM 树。
  2. 对比差异：将新的虚拟 DOM 树与旧的虚拟 DOM 树进行对比，找出差异。
  3. 更新实际 DOM：将差异应用到实际的 DOM 上，实现页面的更新。
3.4.3 事件处理

当输入框输入时，会触发 handleInput 方法。在该方法中，调用 validateInput 方法进行输入验证，并通过 this.$emit('input', this.inputValue) 触发一个自定义的 input 事件。父组件可以通过 @input 指令监听这个事件，并执行相应的操作。

四、下拉框组件

4.1 简单下拉框组件的实现

以下是一个简单的 Vue 下拉框组件代码：

vue

javascript 复制代码 
<template>
  <!-- 下拉框元素，绑定选择事件和值 -->
  <select v-model="selectedValue" @change="handleChange">
    <!-- 遍历选项列表，渲染选项 -->
    <option v-for="option in options" :key="option.value" :value="option.value">
      {{ option.label }}
    </option>
  </select>
</template>

<script>
export default {
  // 定义组件的属性
  props: {
    // 下拉框的选项列表
    options: {
      type: Array,
      default: () => []
    },
    // 下拉框的初始选中值
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 下拉框的内部选中值
      selectedValue: this.value
    };
  },
  watch: {
    // 监听下拉框内部选中值的变化
    selectedValue(newValue) {
      // 触发自定义事件，将新值传递给父组件
      this.$emit('input', newValue);
    }
  },
  methods: {
    // 处理选择事件的方法
    handleChange() {
      // 触发自定义事件，将选择事件传递给父组件
      this.$emit('input', this.selectedValue);
    }
  }
};
</script>

<style scoped>
select {
  /* 设置下拉框的基本样式 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>
4.1.1 代码解释

  • 模板部分 ：使用 <select> 元素渲染下拉框，并通过 v-model 指令双向绑定 selectedValue。同时，通过 @change 指令绑定 handleChange 方法。使用 v-for 指令遍历 options 数组，渲染下拉框的选项。

  • 脚本部分：

    • props：定义了 options 和 value 属性，分别用于接收下拉框的选项列表和初始选中值。
    • data：初始化 selectedValue 为 this.value，作为下拉框的内部选中值。
    • watch：监听 selectedValue 的变化，当值发生变化时，通过 this.$emit('input', newValue) 触发一个自定义的 input 事件，将新值传递给父组件。
    • methods：定义了 handleChange 方法，该方法在下拉框选择发生变化时触发，并通过 this.$emit('input', this.selectedValue) 触发自定义的 input 事件。

  • 样式部分：设置了下拉框的基本样式。

4.2 下拉框组件的使用

在父组件中使用上述下拉框组件的示例代码如下：

vue

javascript 复制代码 
<template>
  <div>
    <!-- 使用自定义下拉框组件，绑定值和监听选择事件 -->
    <MySelect v-model="selectedOption" @input="onSelectChange" :options="options" />
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

<script>
// 引入自定义下拉框组件
import MySelect from './MySelect.vue';

export default {
  // 注册组件
  components: {
    MySelect
  },
  data() {
    return {
      // 下拉框的选项列表
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ],
      // 下拉框的选中值
      selectedOption: ''
    };
  },
  methods: {
    // 处理选择事件的方法
    onSelectChange(newValue) {
      this.selectedOption = newValue;
    }
  }
};
</script>
4.2.1 代码解释

  • 模板部分 ：使用 <MySelect> 组件，并通过 v-model 指令双向绑定 selectedOption。同时，通过 @input 指令监听下拉框的选择事件，并调用 onSelectChange 方法。通过 :options 绑定 options 数组，传递下拉框的选项列表。

  • 脚本部分：

    • import：引入自定义下拉框组件 MySelect。
    • components：注册 MySelect 组件，使其可以在模板中使用。
    • data：初始化 options 数组和 selectedOption 为空字符串。
    • methods：定义了 onSelectChange 方法，当下拉框的选择发生变化时，将新值赋给 selectedOption。

4.3 下拉框组件的扩展

我们可以对下拉框组件进行扩展，添加更多的功能和样式。例如，添加搜索功能和分组选项。以下是扩展后的下拉框组件代码：

vue

javascript 复制代码 
<template>
  <div>
    <!-- 搜索输入框，绑定输入事件 -->
    <input type="text" v-model="searchQuery" @input="handleSearch" placeholder="Search..." />
    <!-- 下拉框元素，绑定选择事件和值 -->
    <select v-model="selectedValue" @change="handleChange">
      <!-- 遍历分组选项列表，渲染分组和选项 -->
      <optgroup v-for="group in groupedOptions" :key="group.label" :label="group.label">
        <option v-for="option in group.options" :key="option.value" :value="option.value">
          {{ option.label }}
        </option>
      </optgroup>
    </select>
  </div>
</template>

<script>
export default {
  // 定义组件的属性
  props: {
    // 下拉框的选项列表
    options: {
      type: Array,
      default: () => []
    },
    // 下拉框的分组选项列表
    groupedOptions: {
      type: Array,
      default: () => []
    },
    // 下拉框的初始选中值
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 搜索查询字符串
      searchQuery: '',
      // 下拉框的内部选中值
      selectedValue: this.value
    };
  },
  watch: {
    // 监听下拉框内部选中值的变化
    selectedValue(newValue) {
      // 触发自定义事件，将新值传递给父组件
      this.$emit('input', newValue);
    }
  },
  methods: {
    // 处理搜索输入事件的方法
    handleSearch() {
      // 过滤选项列表，根据搜索查询字符串进行过滤
      this.filteredOptions = this.options.filter(option =>
        option.label.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    },
    // 处理选择事件的方法
    handleChange() {
      // 触发自定义事件，将选择事件传递给父组件
      this.$emit('input', this.selectedValue);
    }
  }
};
</script>

<style scoped>
input {
  /* 设置搜索输入框的基本样式 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
}

select {
  /* 设置下拉框的基本样式 */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>
4.3.1 代码解释

  • 模板部分 ：添加了一个搜索输入框，通过 v-model 指令双向绑定 searchQuery，并通过 @input 指令绑定 handleSearch 方法。使用 <optgroup> 元素对下拉框的选项进行分组。

  • 脚本部分：

    • props：新增了 groupedOptions 属性，用于接收下拉框的分组选项列表。

    • data：新增了 searchQuery 状态，用于存储搜索查询字符串。

    • methods：

      • handleSearch：在搜索输入时，根据 searchQuery 过滤 options 数组，更新 filteredOptions。
      • handleChange：在下拉框选择发生变化时，触发自定义的 input 事件。

  • 样式部分：添加了搜索输入框的样式。

4.4 下拉框组件的源码分析

下拉框组件的源码实现同样基于虚拟 DOM 和响应式原理。以下是对下拉框组件源码的详细分析：

4.4.1 组件初始化

当创建一个下拉框组件实例时，Vue 会执行以下步骤：

  1. 解析模板 ：将 <template> 部分的 HTML 代码解析为虚拟 DOM 树。
  2. 初始化数据 ：根据 props 定义初始化组件的属性，以及 data 选项初始化组件的状态。
  3. 绑定事件 ：将 @input 和 @change 等指令绑定到相应的方法上。
  4. 计算属性和方法 ：初始化 computed 和 methods 选项中的计算属性和方法。
4.4.2 响应式更新

当下拉框组件的属性或状态发生变化时，Vue 的响应式系统会检测到这些变化，并触发以下操作：

  1. 更新虚拟 DOM：根据变化更新虚拟 DOM 树。
  2. 对比差异：将新的虚拟 DOM 树与旧的虚拟 DOM 树进行对比，找出差异。
  3. 更新实际 DOM：将差异应用到实际的 DOM 上，实现页面的更新。
4.4.3 事件处理

当搜索输入框输入时，会触发 handleSearch 方法，对选项列表进行过滤。当下拉框选择发生变化时，会触发 handleChange 方法，并通过 this.$emit('input', this.selectedValue) 触发一个自定义的 input 事件。父组件可以通过 @input 指令监听这个事件，并执行相应的操作。

五、总结与展望

5.1 总结

本文深入分析了 Vue 框架中基础 UI 组件的实现原理、使用方法和源码细节。通过详细的代码示例和源码解读，我们了解了如何在 Vue 项目中创建、定制和使用按钮、输入框和下拉框等基础 UI 组件，以及如何处理组件之间的交互和状态管理。同时，我们还探讨了基础 UI 组件的性能优化和兼容性问题。

在按钮组件方面，我们实现了简单按钮和扩展按钮，通过 props 传递属性，methods 处理事件，以及 computed 计算属性来动态设置样式。输入框组件实现了基本的输入功能和输入验证，通过 v-model 双向绑定和自定义 input 事件实现与父组件的通信。下拉框组件实现了简单下拉框和带搜索功能的下拉框，通过 v-for 渲染选项和分组选项，以及 @change 事件处理选择变化。

相关推荐
旭久4 分钟前
react+antd封装一个可回车自定义option的select并且与某些内容相互禁用
前端·javascript·react.js
是纽扣也是烤奶9 分钟前
关于React Redux
前端
阿丽塔~11 分钟前
React 函数组件间怎么进行通信?
前端·javascript·react.js
冴羽35 分钟前
SvelteKit 最新中文文档教程（17）—— 仅服务端模块和快照
前端·javascript·svelte
uhakadotcom37 分钟前
Langflow：打造AI应用的强大工具
前端·面试·github
前端小张同学1 小时前
AI编程-cursor无限使用， 还有谁不会🎁🎁🎁？？
前端·cursor
yanxy5121 小时前
【TS学习】（15）分布式条件特性
前端·学习·typescript
uhakadotcom1 小时前
Caddy Web服务器初体验：简洁高效的现代选择
前端·面试·github
前端菜鸟来报道1 小时前
前端react 实现分段进度条
前端·javascript·react.js·进度条
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05苍穹外卖面试总结06DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具07RAG 实践- Ollama+RagFlow 部署本地知识库08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09如何本地部署AI智能体平台，带你手搓一个AI Agent10Android下HWC以及drm_hwcomposer普法(上)