js文件中调用vue组件methods中的方法

需求:在js文件中的js_fun()中得到一个结果,想要把该结果作为参数传给vue中vue_fun()方法,并在vue_fun()中执行该参数相关的操作;js文件和vue不在同一个文件夹下

方法:

//vue

mounted(){
//关键是这句,一个方法对应着js中的方法,一个方法对应着vue中的
window.callfun = this.vue_fun;
...
},
methods:{
...
vue_fun(param){
    ...
}
...
}


//js

js_fun(){
...
...
callfun(param)
}

 

要在 JavaScript 文件调用 Vue 3.2 的组件并显示对话框,一种方式是使用 Vue 3.2 提供的 `createApp` 函数来创建一个 Vue 应用实例,并将该实例挂载到页面上。下面是一个简单的例子: 1. 首先,确保已经安装了 Vue 3.2 及其相关的依赖项。 2. 在 HTML 文件引入 Vue 3.2 的 CDN 或者本地安装的 Vue 包: ```html <!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My App</title> </head> <body> <div id="app"></div> <script src="https://unpkg.com/vue@3.2.0/dist/vue.global.js"></script> <script src="main.js"></script> </body> </html> ``` 3. 在 JavaScript 文件定义一个 MyDialog 组件: ```javascript // MyDialog.vue const MyDialog = { template: ` <div class="dialog"> <h2>{{ title }}</h2> <p>{{ message }}</p> <button @click="close">OK</button> </div> `, props: { title: String, message: String, }, methods: { close() { this.$emit('close'); }, }, }; ``` 4. 在 JavaScript 文件使用 `createApp` 函数创建一个 Vue 应用实例,并将 MyDialog 组件注册为全局组件: ```javascript // main.js import { createApp } from 'vue'; import MyDialog from './MyDialog.vue'; const app = createApp({ components: { MyDialog }, data() { return { showDialog: false, dialogTitle: 'Dialog Title', dialogMessage: 'Dialog message.', }; }, methods: { openDialog() { this.showDialog = true; }, closeDialog() { this.showDialog = false; }, }, }).mount('#app'); ``` 5. 在 HTML 文件添加一个按钮,点击该按钮可以触发 `openDialog` 方法来显示对话框: ```html <!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My App</title> </head> <body> <div id="app"> <button @click="openDialog">Open Dialog</button> <my-dialog v-if="showDialog" :title="dialogTitle" :message="dialogMessage" @close="closeDialog" /> </div> <script src="https://unpkg.com/vue@3.2.0/dist/vue.global.js"></script> <script src="main.js"></script> </body> </html> ``` 这样,点击按钮后就可以显示一个包含 MyDialog 组件的对话框,可以通过修改 `dialogTitle` 和 `dialogMessage` 来动态更新对话框的标题和内容。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值