MyElement Docs

组件通信 ​

项目差不多做完，趁热打铁，总结一下

props ​

props 父传子

events ​

直接把变量带进方法 @click="onClick(status)"

provide/inject ​

FormContext form => formItem

formItemContext FormItem => input

Scoped lost ​

FormItem #template

在父组件创建数据结构，在子组件填充数据（子到父也可） ​

  1. Form => FormItemContext[]
  2. 子组件FormItem => onMounted时插入数据（addField）、删除数据（removeField）
  3. 在Form(父组件) 直接调用 FormItem 的具体属性和方法

如：父组件创建变量 let instances = [] 通过方法2 传实例，这样父组件就可以通过instances拿到实例，使用expose的方法和属性了

pub/sub 发布订阅模型 ​

ts
// 父组件
const emitter = mitt()
emitter.on('addField', () => {})
emitter.on('removeField', () => {})

provide(key, { emitter })

// 子组件
emitter = inject(formContextKey)
emitter.emit(addField, formItemContext)

vuex(Piano) ​

这里暂用不到

其他Tip ​

  • 注意defineExpose，一个好的组件应尽可能为用户提供实例中有用的信息
    • vue3 新增expose（vue2实例属性都能拿到，杂且不安全）
  • 对于有可能出现的异步操作，尽可能提供Promise