普通js文件里面如何访问vue实例this指针

目录
  • 普通js文件里访问vue实例this指针
  • then使用函数无法访问vue实例化的this
    • 问题
    • 原因
    • 解决

普通js文件里访问vue实例this指针

main.js 文件，暴露出vue实例

Vue.use(VueAxios)
const vue = new Vue({
  router,
  store,
  created: bootstrap,
  render: h => h(App)
}).$mount('#app')
export default vue

js 文件中，使用实例

import vue from '@/main'
vue.$message.success('成功')

then使用函数无法访问vue实例化的this

问题

原因

以上代码，使用匿名函数的写法

匿名函数的指针指向------函数操作的本身（不可以使用组件中声明的变量或者函数）

解决

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 如何在JS文件中获取Vue组件

    1. 背景 最近在写项目时候遇到这样一个需求: 我封装了一个js文件 utils.js,然后在组件 my-component.vue 中引用了该js文件. 在 utils.js 文件中有一些函数,需要操作 my-component.vue 中的 data 和 methods. 为了方便理解,上述 js 文件和组件名非实际工程中的名字,仅是示例. 2. 思路 通过调用函数把 组件实例 this 传递到 被应用的 js 文件 里. 3. 目录结构 src/ ├── App.vue ├── asset

  • JavaScript中的this基本问题实例小结

    本文实例讲述了JavaScript中的this基本问题.分享给大家供大家参考,具体如下: 在函数中 this 到底取何值,是在函数真正被调用执行的时候确定下来的,函数定义的时候确定不了. 执行上下文环境 : **定义**:执行函数的时候,会产生一个上下文的对象,里面保存变量,函数声明和this. **作用**:用来保存本次运行时所需要的数据 当你在代码中使用了 this,这个 this 的值就直接从执行的上下文中获取了,而不会从作用域链中搜寻. 关于 this 的取值,大体上可以分为以下几种情况

  • 基于Vue中this.$options.data()的this指向问题

    目录 this.$options.data()的this指向问题 vue文档中有关于data的指向问题的解释 vue骚操作之this.$options.data() 重置vue组件的data数据 小结一下 this.$options.data()的this指向问题 项目里遇到一个问题,用this.$options.data()重置组件data时报错,原因是因为form里的rule规则采用了this写法. 如下: rules: {         code: [this.$rules.requir

  • 改变javascript函数内部this指针指向的三种方法

    在查了大量的资料后,我总结了下面的三条规则,这三条规则,已经可以解决目前我所遇到的所有问题.规则0:函数本身是一个特殊类型,大多数时候,可以认为是一个变量. 复制代码 代码如下: function a() { alert(this); } 或者 var a = function() { alert(this); } 都可以认为是创建了一个变量,这个变量的值就是一个函数. 规则1:如果一个函数,是某个对象的key 值,那么,this就指向这个对象. 这个规则很好理解: 复制代码 代码如下: var

  • 普通js文件里面如何访问vue实例this指针

    普通js文件里面如何访问vue实例this指针

    目录 普通js文件里访问vue实例this指针 then使用函数无法访问vue实例化的this 问题 原因 解决 普通js文件里访问vue实例this指针 main.js 文件,暴露出vue实例 Vue.use(VueAxios) const vue = new Vue({   router,   store,   created: bootstrap,   render: h => h(App) }).$mount('#app') export default vue js 文件中,使用实例

  • vue项目中在外部js文件中直接调用vue实例的方法比如说this

    一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦.在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入. 步骤一:main.js导出vue实例 var vue = new Vue({ el: '#app

  • 解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题

    解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题

    1.在vue项目根目录下新建vue.config.js(不是在src下面) vue.config.js配置文件: module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler? // https://vu

  • Node.js 文件夹目录结构创建实例代码

    第一次接触NodeJS的文件系统就被它的异步的响应给搞晕了,后来发现NodeJS判断文件夹是否存在和创建文件夹是还有同步方法的,但是还是想尝试使用异步的方法去实现. 使用的方法: fs.exists(path, callback); fs.mkdir(path, [mode], callback); 实现文件夹目录结构的创建代码实现如下: //创建文件夹 function mkdir(pos, dirArray,_callback){ var len = dirArray.length; con

  • 详解js文件通过python访问数据库方法

    我来教你 js文件怎么通过python访问数据库,希望能够为你带来帮助. 1.如果是要提交表单内容给 服务器的 python 处理,那么只需要在表单 <form> 里面的 action 填写服务端的处理路由就可以了.或者用 <a> 指向服务器路由get querystring.前端方面不需要python啊. 2.前端的提交交互动作,都是由 javascript 处理就可以,远程登录ssh之后,那个web页面可以通过url访问还是服务器上可以直接读取的文件? 3.如果是前者,就等于p

  • VUE项目中引入JS文件的方法总结

    目录 1.在index.html页面使用script标签引入 2.在main.js中使用window.moduleName 使用 3.手动添加export 4. 使用import方式,把需要的js库中的方法挂载到全局 补充:Vue3如何引用全局JS文件 总结 在开发Vue项目的时候,有时需要使用一些非ES6格式的没有export的js库,可以有如下方法实现: 1.在index.html页面使用script标签引入 当然也可以使用cdn的地址.这样引入后的内容是全局的,可以在所有地方使用. <!D

  • Vue创建项目后没有webpack.config.js(vue.config.js)文件的解决

    目录 webpack.config.js文件没有的原因 手动创建一个 vue.config.js 没有配置vue.config.js之前,打包后的文件如下 配置后 总结 webpack.config.js文件没有的原因 Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js. vue-cli3 之后创建的时候并不会自动创建 vue.config.js,因为这个是个可选项,所以一般都是需要修改 webpack 的时候才会自己创建一个 vue

  • Vue 实例事件简单示例

    Vue 实例事件简单示例

    本文实例讲述了Vue 实例事件.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 实例事件</title> <script type="text/javascript" src="https://cdn.bootcss.com/v

  • js读取json文件片段中的数据实例

    在html中利用js读取动态网站从服务器端返回的数据进行显示 1.js.html 页面 需要引入 执行jquery的js文件 <HTML> <HEAD> <META name=Generator content=EditPlus> <META name=Author content=""> <META name=Keywords content=""> <META name=Description c

随机推荐