ele-h5项目使用vue3+vite开发:第二节、search 搜索框组件开发

如何设计一个组件

 需求分析

 布局

ele-h5项目使用vue3+vite开发:第二节、search 搜索框组件开发_第1张图片

  • content
    • left-icon
    • body
    • input-control
    • right-icon
  • action

功能

  • ele-h5项目使用vue3+vite开发:第二节、search 搜索框组件开发_第2张图片

使用 defineEmits 定义组件的事件

在组件的script setup 里如何定义事件

  • 使用defineEmits()定义
  • 先声明事件接口
  • 
    
    

如何定义组件的 v-model

在组件的script setup 里如何定义 v-model 参数

  • 声明接口属性,定义v-model双向绑定的变量参数。
  • 使用定义的v-model双向绑定的变量参数
  • 
    
    
    

是的

如何使用 CSS 变量

定义css变量,使用var(--van-padding-xs)格式来书写vue3的css变量,可以在script setup中进行自定义css变量值

  • 在组件中使用css变量
  • 
    
    
    
    

BEM 命名规范

定义

  • Bem是块(block) 、元素(element) 、修饰符(modifier)的简写
  • - 中划线:仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号
  • __ 双下划线:双下划线用来连接块和块的子元素
  • -- 双中划线:双中划线用来描述一个块或者块的子元素的一种状态

你可能感兴趣的:(项目开发,vue3,前端,javascript,开发语言)