前端随记 - 依赖注入、刷新表格，生命周期小结

程序员文章站 2023-12-28 11:52:40

...

① 依赖注入

参考：

https://blog.csdn.net/qq_16772725/article/details/80467492

provide / inject 组合：

父组件：provide，提供一个方法或者属性等
子组件：使用 inject 调用。

② 刷新表格

v-model 重新调用表格数据接口，刷新表格

    <Button @click="modalAdd = true">添加</Button>
    <Modal
      v-model="modalAdd"
      title="请输入要添加的信息"
      @on-ok="handleAdd"
      @on-cancel="handleCancel">
      <Input v-model="inputType" placeholder="请输入养护类型" style="margin:5px"/>
      <Input v-model="inputProject" placeholder="请输入具体养护项目" style="margin:5px"/>
      <Input v-model="inputMethod" placeholder="请输入处理方法" style="margin:5px"/>
    </Modal>

本质上流程：

点击添加按钮，将 modalAdd 变量设置为true
Modal 绑定 modalAdd 变量，当值为true时候，显示 Modal
on-ok,on-cancel，是 view-ui 提供的，用来设置点击确定和取消时候触发的函数。

③ 生命周期小结

参考：

https://blog.csdn.net/javascipt____/article/details/94715731

创建阶段：主要用于组件创建时，获取数据设置组件。 beforeCreate组件实例刚被创建，组件属性data、el等还未生成。
created（能够访问创建成功的组件实例，但不能访问模板，el 或 DOM）
挂载阶段：主要用于访问组件 DOM beforeMount在挂载开始之前被调用，完成了 el 和 data 初始化
mounted（能够访问组件模板，模板挂载完毕，el 被新创建的 vm.$el 替换）
更新阶段：数据变化，组件重新渲染。 beforeUpdate（能够访问组件更新后的数据，但无法访问 DOM）
updated（能够访问 DOM）
销毁阶段：（用于销毁组件，做清理工作） beforeDestory（销毁前还能访问组件实例）
destoryed销毁完毕，销毁实例，清理实例连接，解绑它的全部指令及事件监听器，并不会清除data的数据或者清除dom