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

ops/2024/10/24 17:56:34/

这个需求是原有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```bashwindow.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}