页面局部使用vue等框架其它部分用JQuery进行交互

这个需求是原有django在网页需要定制一个人员签到信息。状态有三种，在岗，下班。好吧两种。但是你想 1，1.这是两次、共四个可能，00， 10，01，11.其中00是在家。10是在岗。01是。不签到只签退，算是异常， 11 最后和00是一样的。所以有三种状态，三个色表示，全部的人员信息。其中还有搜索之类。做成了VUE在一个单文件。需要借用信息并显示出来。
在html中有总的树状菜单。点击就让vue加载一次。vue会从接口或点到时传入window的全局变量接到数据。
具体就是一样一个流程。有利于用vue集成到原有系统中实现一个功能。
下面是普通在一直在用的点数字vuetkyc

<script >
import { ref,watch ,getCurrentInstance } from 'vue'
 import { useHttp } from './http';

  const  count =ref(0)
   const parentmsg = ref(String("dsafd"))
  
 export default {
   props: {
    // 基本类型验证
    msg3: {
      type: String,
      default: '默认标题'
    },
  },
    mounted() {
 
    window.msgproxg=this
 
  },

    
     setup() {
         const users = ref([]);
 
    const fetchUsers = async () => {
       
fetch('/api/'+parentmsg.value)
  .then((response) => {
    if (response.ok)
    {
    return response.json();
    }
  })
  .then((data) => {
    if (data)
     console.log(data["222"]);

  })
  .catch((error) => {
    console.error('Fetch error:', error);
  });
    };
 
        watch(parentmsg, async (newValues, oldValues) => {
      console.log('parentmsg changed:', newValues, oldValues);
        if  (newValues){
           fetchUsers();
   }
    });
       const { loading, data, error, get } = useHttp();
       return {count,
       parentmsg,
       get,
       data,
       loading,
        fetchUsers,
       error,
       changemsg() {
       parentmsg.value=" 1222233333"

    }
       };
     },
 };
</script>

<template>
  <h1 ref="into"></h1>
{{ msg3 }}
  <div class="card">
    <button type="button" ref="btn" @click="count++">count is {{ count }}</button>
    <p>
   {{ parentmsg }}   Edit 
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

还算这样吧 in  mounted 
VUE2

```bash
    window.msgproxg=this

VUE3

```bash
import { ref,onMounted,computed,getCurrentInstance } from 'vue';
 onMounted(() => { 
  fetchUsers()
  
   window.myvue=getCurrentInstance()
   }

然而
https://blog.csdn.net/jieyucx/article/details/134030633

J-JQuery， 外部
V- VUE ，内部

V中有

. Element

<h1 ref="into"></h1>

J中 操作普通元素。

window.msgproxg.$refs.meme.innerHTML=“标题”

. 事件
V

 <button type="button" ref="btn" @click="count++">count is {{ count }}</button>

J 中

window.msgproxg.$refs.btn.click()

上面是refs在两个例子
, 方法及监听变化
V中

     watch(parentmsg, async (newValues, oldValues) => {
      console.log('parentmsg changed:', newValues, oldValues);
        if  (newValues){
           fetchUsers();
   }
    });
    changemsg(value) {
       parentmsg.value= value

    }

J中，因为只接改变内部变量，暂未找到方法，所以使用changmsg。而没有只接使用，异步方法在调用。这是因为我也不明白，只接使用，会有什么不可想像的事。所以经过这一圈 watch。 function， 还有async的fecthuser
只有一行，获取参数2344的API数据

window.msgproxg.changemsg("2344")

介绍结束J-V结束。
另外V到J在控制，感觉除了window和，document应该可以做一些吧。就是另一个话题了。

原文地址：https://blog.csdn.net/wjcroom/article/details/143027272

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！