Html集成 vue3,js文件访问vue内的方法和属性

最新推荐文章于 2024-06-26 18:16:27 发布

蜡笔大杺

最新推荐文章于 2024-06-26 18:16:27 发布

阅读量257

点赞数 1

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/qq_44871531/article/details/139867397

版权

标题页面代码如下

如下代码,假设index.js文件中有个 getUserInfo函数,
1.我们首先需要把 let vm = app.mount(‘#app’);的vm传到js文件中,这样才能访问vue中定义的元素和函数
2.vue中定义的函数需要return出去才能在js文件中调用
3.js文件中,调用vue中的函数作为参数即可传参到vue中

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>测试</title>
    <link rel="stylesheet" href="../style/vant/index.css" />
    <!-- 引入Vue -->
    <script src="../js/vue.global.js"></script>
    <script src="../js/vant.min.js"></script>
    <script type="text/javascript" src="../js/index.js"></script>
</head>

<body>
    <div id="app">
        
    </div>
    <script type="module">
        const { createApp, ref, onMounted } = Vue;
        const { showNotify } = vant;

        const app = Vue.createApp({
            setup() {
                let eye1 = ref("closed-eye");
               
                onMounted(() => {})
                async function init() {}
                async function cebtn(curnameext) {
                    eye1 .calue= curname;
                }

                return {
                    eye1,
                    cebtn,
                }
            }
        });
        app.use(vant);
        // 通过 CDN 引入时不会自动注册 Lazyload 组件
        // 可以通过下面的方式手动注册
        app.use(vant.Lazyload);
        let vm = app.mount('#app');
        getUserInfo(vm);
    </script>

</body>

</html>

标题js文件

let vmfun = null
function getUserInfo(vm) {
	vmfun = vm;
	getUserToken()
}
function getUserInfo(vm) {
vmfun.ceBtn("姓名测试")
}

蜡笔大杺

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html集成 vue3,js文件访问vue内的方法和属性

1.我们首先需要把 let vm = app.mount(‘#app’);的vm传到js文件中,这样才能访问vue中定义的元素和函数。如下代码,假设index.js文件中有个 getUserInfo函数,2.vue中定义的函数需要return出去才能在js文件中调用。3.js文件中,调用vue中的函数作为参数即可传参到vue中。
复制链接

扫一扫