首先创建转换 vue 组件, 内容如下:
- <!-- 子组件 -->
- <template>
- <!-- <el-dialog :visible.sync="$store.state.show">{{msg}}</el-dialog> -->
- <div :ref="reff"></div>
- </template>
- <script>
- export default {
- props:{
- msg: String,
- mountDom: htmlDivElement,
- BimCom:Function,
- BimComProps:Object,
- reff:{
- type:String,
- default:'BimMount',
- },
- },
- updated(){
- const _ = this;
- // _.$store[`${_.reff}Store`] = window.addElement({
- // BimCom: _.BimCom,
- // props: _.BimComProps,
- //// Dom: _.mountDom,
- // Dom: _.$refs[_.reff],
- // });
- },
- mounted(){
- const _ = this;
- _.$store[`${_.reff}Store`] = window.addElement({
- BimCom: _.BimCom,
- props: {
- ..._.BimComProps,
- provideState(state){
- _.$store.commit('changeVueState', state);
- }
- },
- // Dom: _.mountDom,
- Dom: _.$refs[_.reff],
- });
- const newCommit = _.$store.commit;
- _.$store.commit = (type, state) => {
- _.$store[`${_.reff}Store`].thirdChangeState(state);
- newCommit(type, state);
- }
- },
- data(){
- return{
- }
- }
- }
- </script>
在父组件调用转换组件, 内容如下:
- <!-- 父组件中引入子组件 -->
- <template>
- <div>
- <div id = 'testComponent'>
- <span>{{$store.state.text}}</span>
- <div @click="changeReactState">vue 改变 react 状态 </div>
- </div>
- <!-- <div @click="changeVueState">react 改变 vue 状态 </div> -->
- <BimCom :reff="reff" :BimCom="BimCom" :BimComProps="$store.state.BimComProps"></BimCom>
- </div>
- </template>
- <script>
- import BimCom from './components/BimCom'
- export default {
- name: 'App',
- data(){
- const _ = this;
- return {
- msg:'6666',
- mountDom: null,
- reff:'mybox',
- BimCom: window.testComponent,
- }
- },
- methods:{
- changeReactState(){
- this.$store.commit('changeVueState', {
- text:6666,
- })
- },
- changeVueState(){
- this.$store.commit('changeVueState', state);
- }
- },
- mounted(){
- // this.mountDom = this.$refs.mybox;
- },
- components:{
- "BimCom":BimCom
- }
- }
- </script>
- <style scoped>
- #testComponent{
- background-color: aqua;
- margin-bottom: 30px;
- }
- </style>
使用注释:
只需要在父组件中引用子组件, 并传入相应参数:
1.reff----> 挂载点 ref 值, 用于定义和查找 dom 节点, 当只有一处需要, 默认值为 BimMount
2.BimCom--->react 组件
3.BimComProps----> react 组件初始化数据;
4. 在 vue 组件中改变 react 组件状态的方法:
在每一个挂载的 react 组件后, 会在 $store 中注册一个以 reff 命名的
store, 然后在组件中可以通过 this.$store.[reff]Store 调用相应
方法, 如:
挂载节点 reff="BimMount", 那么调用方法就是:
this.$store.BimMountStore.getState();
获取当前 react 组建的 state;
然后可以用 $store 的 commit 或者 dispatch 直接改变 react 组件状态
5. 后续会附上 react 组件实现方法
来源: http://www.qdfuns.com/article/44524/bdb0ab708b6eca8c5e6184dd99668a6f.html