vue插件与平台如何相互传接值

效果

一、在插件项目写一个vue插件

1.创建文件src\vue\modules\demo\index.js

import { install } from '../../install.js';
import index from './index.vue';
// 加载echarts依赖
JE.loadChartScript(true);
// 安装组件
install('Demo', index);

2.创建文件src\vue\modules\demo\index.vue

<template>
  <div class="pro-vue-demo">
    <div
      @click="showContent"
      class="wrapper-title"
    >
      <!-- {{ formValue.SCHOOL_XXLS }} -->
      {{ title }}
    </div>
    <button @click="showContent">
      点击
    </button>
    <div class="wrapper-bar">
      <!-- <ChartBar /> -->
    </div>
  </div>
</template>

<script>
// import ChartBar from './components/chart-bar';

export default {
  name: 'Demo',
  components: {
  },
  props: {
    params: {
      type: Object,
    },
    callback: {
      type: Function,
    },
  },
  data() {
    return {
      title: '我们是demo的标题',
      isShowContent: false,
      formValue: {},
    };
  },
  created() {
    debugger;
    this.formValue = this.params.formValue;
  },
  mounted() {
    // 改变标题
    // this.changeTitle();
  },
  methods: {
    // 三秒后改变标题
    changeTitle() {
      setTimeout(() => {
        this.title = '三秒后，我是新的标题';
      }, 3000);
    },
    // 点击标题展示内容
    showContent() {
      debugger;
      // this.isShowContent = !this.isShowContent;
      this.callback({ aaa: this.formValue.SCHOOL_XXLS });
    },
  },
};
</script>

<style lang='scss' scoped>
.pro-vue-demo {
  box-sizing: border-box;
  .wrapper-title {
    color: #333;
    font-weight: 600px;
    font-size: 18px;
    text-align: center;
    padding: 20px;
  }
  .wrapper-content {
    height: 300px;
    background-color: #f5f5f5;
    line-height: 300px;
  }
}
</style>

3.把该插件写入配置文件

二、把该vue插件插入平台功能表单中

1. 表单渲染后(afterrender)事件写入代码

var panel = Ext.create('PRO.demo.View',{
            height:600,
            dock:'top',
            vueInfo:{
                params:{
                    formValue:self.getValues()
                },
                callback:function(formValue){
                    self.getFields('SCHOOL_XX').setValue(formValue.aaa);
                }
            }
        });
        self.addDocked(panel);

2.刷新功能缓存进表单 插件已挂入

三、怎么功能表单的值传入vue插件并在插件上展示

1.表单渲染后(afterrender)事件写入的代码 vueInfo.params传入功能功能的值

vueInfo:{
                params:{
                    formValue:self.getValues()
                },
        }

2.vue插件接入平台传来的参数

props: {
    params: {
      type: Object,
    },
  },

data() {
    return {
      formValue: {},
    };
  },

created() {
    this.formValue = this.params.formValue;
  },

3.把表单上的学校历史的值写入vue插件页面

<div class="wrapper-title">
      {{ formValue.SCHOOL_XXLS }}
    </div>

四、表单学校历史的值我要实时的在vue面板展示

在学校历史字段值改变(change)事件写入代码

var domeView = field.up('jeeditview').down('[xtype=pro.demo]');
    if(domeView && domeView.vm){
        domeView.vm.params.formValue.SCHOOL_XXLS = value;
    }

五、点击vue插件上的按钮把vue面板上展示的数据写入平台表单校训字段上

1.表单渲染后(afterrender)事件写入的代码 vueInfo.callback

vueInfo:{
                callback:function(formValue){
                    self.getFields('SCHOOL_XX').setValue(formValue.aaa);
                }
            }

2.vue插件接入传入的方法

props: {
    callback: {
      type: Function,
    },
  },

3.给vue按钮挂接click事件执行传入的方法

<button @click="showContent">
      点击
    </button>

// 点击标题展示内容
    showContent() {
      // this.isShowContent = !this.isShowContent;
      this.callback({ aaa: this.formValue.SCHOOL_XXLS });
    },