实习记录2

1.flowable框架参数传递大概流程

通过传递xml,传递到后端,然后后端去解析

2.vue封装组件

在 Vue.js 中创建可复用的自定义组件是一个常见的需求,这样可以提高代码的复用性和可维护性。下面是一个简单的步骤指南,帮助你创建一个自定义组件,并在其他 Vue 文件中使用它,同时还能传递参数。

步骤 1: 创建自定义组件

假设你想创建一个名为 MyCard 的组件,它可以展示一些信息,并且可以接受标题和内容作为参数。在你的项目源码目录下,创建一个新的 Vue 文件,例如 MyCard.vue

Vue

vue 复制代码
<!-- MyCard.vue -->
<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyCard',
  props: {
    title: {
      type: String,
      default: 'Default Title'
    },
    content: {
      type: String,
      default: 'Default Content'
    }
  }
}
</script>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
}
</style>

这里我们定义了一个 MyCard 组件,它有一个简单的 HTML 结构,并且可以通过 props 接收外部传递进来的 titlecontent 数据。

步骤 2: 注册并使用组件

接下来,你可以在任何 Vue 文件中注册并使用 MyCard 组件。有两种注册方式:局部注册和全局注册。

全局注册

main.js 或者 main.ts 文件中全局注册组件,这样所有 Vue 文件都可以直接使用它而不需要再次注册。

Javascript

js 复制代码
// main.js
import Vue from 'vue';
import App from './App.vue';
import MyCard from './components/MyCard.vue';

Vue.component('MyCard', MyCard);

new Vue({
  render: h => h(App),
}).$mount('#app')
局部注册

在具体的 Vue 文件中局部注册组件,这样只有这个文件才能使用它。

Vue

vue 复制代码
<template>
  <div id="app">
    <MyCard title="Hello World" :content="message" />
  </div>
</template>

<script>
import MyCard from './components/MyCard.vue';

export default {
  name: 'App',
  components: {
    MyCard
  },
  data() {
    return {
      message: 'Welcome to Vue.js!'
    };
  }
};
</script>

在上述示例中,我们在 App.vue 文件中导入了 MyCard 并在局部注册了它。然后在模板中使用 <MyCard> 标签,并通过属性绑定的方式传递了 titlecontent

总结

通过以上步骤,你可以轻松地在 Vue.js 项目中创建和使用自定义组件,同时还能灵活地传递参数。这不仅提高了代码的复用性,还让组件之间的数据交互更加清晰和简洁。

3.vue watch
watch 是 Vue.js 中用于响应数据变化的一种方式。当你有一个数据属性需要在它的值改变时执行一些副作用(如数据处理、UI 更新、异步请求等),watch 提供了一种非常方便的方式来处理这种场景。

在 Vue 中,watch 是一个对象,它的键是你想要观察的响应式属性的名称,而值是一个函数或对象。这个函数或对象定义了当被观察的属性发生变化时应该执行的代码。

基础用法

Javascript

js 复制代码
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`message changed from ${oldVal} to ${newVal}`);
    }
  }
};

在这个例子中,每当 message 的值发生改变,watch 中定义的函数就会被调用,函数接收到新的值 (newVal) 和旧的值 (oldVal)。

深度观察

如果需要观察嵌套属性的变化,可以使用深度观察。这可以通过在 watch 对象中将属性值设置为包含 deep: true 的对象来实现。

Javascript

js 复制代码
export default {
  data() {
    return {
      user: {
        name: 'John Doe'
      }
    };
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        console.log(`User's name changed from ${oldVal.name} to ${newVal.name}`);
      },
      deep: true
    }
  }
};

在这个例子中,user 对象的任何属性变化都会触发 handler 函数。

立即执行

你还可以让 watch 函数在组件初始化时立即执行一次,这可以通过在 watch 对象中将属性值设置为包含 immediate: true 的对象来实现。

Javascript

js 复制代码
export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count: {
      handler(newVal, oldVal) {
        console.log(`Count is now ${newVal}`);
      },
      immediate: true
    }
  }
};

在这个例子中,handler 函数不仅在 count 发生变化时调用,而且在组件初始化时也会调用一次。

总的来说,watch 是 Vue 中一种非常强大的特性,它允许你对数据的变化做出反应,执行特定的操作,这对于构建响应式和动态的 UI 非常有用。

4.管理员主动切换下属账号思路:

后端直接生成token传递过来,跳过密码对比步骤。前端重设token后刷新页面

5.VForm开关设定控件显示或隐藏

6.console.log失效

不知道,换console.info

7.vform结合msg,弹窗增加扩展性

示例代码:(放到vform的事件属性中)
MailGroupSelector是我自己全局封装的一个组件
emailGroupSelectShow是需要回显的输入框
getSelectRow是在组件中写的一个获取选取数据的方法。(因为我这段业务是为了弹窗展示一系列可选项,然后选择后回显到输入框)

基本上只需要替换自封装组件和输入框唯一名称(VForm可视化面板中设定),就能用了

javascript 复制代码
let h = this.$createElement;
let input = this.getWidgetRef("emailGroupSelectShow");
// 使用ref属性给MailGroupSelector组件一个引用名
let mailGroupSelectorRef = 'mailGroupSelectorRef';

// 确保此方法在组件的mounted钩子或之后被调用
this.$nextTick(() => {
  this.$msgbox({
    title: '邮件组选择',
    message: h('div', null, [
      h('MailGroupSelector', { ref: mailGroupSelectorRef })
    ]),
    customClass: 'winClass',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        // 使用Vue.nextTick()确保在DOM更新后访问$refs
        this.$nextTick().then(() => {
          if (this.$refs[mailGroupSelectorRef]) {
            this.$refs[mailGroupSelectorRef].getSelectRow().then(result => {
              // 这里你可以处理getSelectRow返回的结果
              console.log('Selected rows:', result);
              input.setValue(result.dictValue);

              // 一旦处理完成,立即关闭对话框
              done();
            }).catch(error => {
              // 处理任何可能的错误
              console.error('Error getting selected rows:', error);
              done();
            });
          } else {
            console.error('MailGroupSelector组件未找到');
            done();
          }
        });
      } else {
        done();
      }
    }
  })
});
相关推荐
Hejjon3 小时前
SpringBoot 整合 SQLite 数据库
笔记
西洼工作室5 小时前
【java 正则表达式 笔记】
java·笔记·正则表达式
初学者7.6 小时前
Webpack学习笔记(2)
笔记·学习·webpack
新手上路狂踩坑7 小时前
Android Studio的笔记--BusyBox相关
android·linux·笔记·android studio·busybox
stm 学习ing8 小时前
HDLBits训练3
c语言·经验分享·笔记·算法·fpga·eda·verilog hdl
尘觉8 小时前
算法的学习笔记—扑克牌顺子(牛客JZ61)
数据结构·笔记·学习·算法
bohu839 小时前
sentinel学习笔记1-为什么需要服务降级
笔记·学习·sentinel·滑动窗口
初学者7.10 小时前
Webpack学习笔记(3)
笔记·学习·webpack
bohu8311 小时前
sentinel学习笔记5-资源指标数据统计
笔记·sentinel·statisticslot
璞~11 小时前
MQTT 课程概览 (学习笔记)02
笔记·学习