因配置的关系,导致 vue的data选项中存在事件。而事件无法获取 vue 的实例对象;项目是单文件形式的,以下代码只是例子

new Vue({
el:...,
data:{
a: {
onevent:function(){
//由于a是某个插件的根对象,所以这里无法获取 vue 的实例对象
}
}
}
})

 

方法一:

参考export用法文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export

export default (()=>{
let defaultVue = {
data: {
a:{
b: function(){
// 这里可以使用defaultVue这个对象,不过,这里使用的就是js的对象,只能通过 defaultVue.data.propertyName 来获取值
}
}
}
};
return defaultVue;
})()

  

方法二(推荐):

vue Data选项的文档可以看一下:https://cn.vuejs.org/v2/guide/instance.html#%E6%95%B0%E6%8D%AE%E4%B8%8E%E6%96%B9%E6%B3%95

主要知道 想要vue的响应式驱动的方式的话,就在 data选项里声明一个 属性即可,再然后就需要了解一下 vue的声明周期了

第一步:

这里的 bind 方法,可以去 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind 这里看看,bind方法的意思就是绑定指定的上下文(注意,是bind返回的函数才绑定到你指定的上下文了,不会修改原函数的)

然后就 ok 了,这样就不需要声明全局的变量保存 vue实例了,不容易啊,琢磨近一天了

vue单文件组件data选项的函数体获取vue实例对象的更多相关文章

  1. Vue单文件组件

    前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页 ...

  2. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  3. vue 单文件组件

    在很多vue项目中,我们使用vue.component来定义全局组件,紧接着用new Vue({el:'#container'})在每个页面内指定一个容器元素 这种方式在很多中小规模的项目中运作的很好 ...

  4. 基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

    第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 & ...

  5. vue 单文件组件最佳实践

    vue 单文件组件最佳实践 生命周期 template <template> <section> <h1>vue single file components te ...

  6. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  7. ts-loader如何与vue单文件组件衔接

    .ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...

  8. vue单文件组件的构建

    在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...

  9. Vue单文件组件基础模板

    背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...

随机推荐

  1. RFC2544优化步长测试——信而泰网络测试仪实操

    一.测试拓扑 拓扑说明 1.测试仪两个端口和DUT两个端口相连 2.测试仪P1端口发出流量,经过DUT转发后,从B端口发出,进入测试仪P2端口. 二.测试思路 1.在测试仪端口上创建两个Interfa ...

  2. 创新引领,再获嘉誉!Smartbi亮相亚太银行数博会,共话未来银行数字化趋势

    4月21日,以"加速数字化,引领银行业务创新"为主题的第六届亚太银行数字化创新博览会在上海盛大开幕.本次高峰论坛吸引了400多位来自学术界.咨询行业以及银行业等不同领域的行业大咖齐 ...

  3. 案例八:shell自动化管理账本脚本

    该脚本目的帮助管理员创建账号.删除账号.锁定账号.解锁账号. #!/bin/bash #filename: #author: #date:2018-6-6 echo "用户管理程序" ...

  4. 【C# 线程】WaitHandle类

    理论 Windows的线程同步方式可分为2种,用户模式构造和内核模式构造.内核模式构造:是由Windows系统本身使用,内核对象进行调度协助的.内核对象是系统地址空间中的一个内存块,由系统创建维护. ...

  5. 举例说明EF CORE中模型之间的一对多、多对多关系的实现

    该例子是我临时想出来的,不具有任何的实际意义.类图如图1所示. 图1 类代码: [Table("student")] public class Student { public i ...

  6. shell脚本的调试sh-x

    转至:https://blog.csdn.net/yjgithub/article/details/80908079 目录 一.简介 二.sh -x 脚本名.sh 三.set -x 一.简介 使用sh ...

  7. 【pip install】+【环境变量配置】

    1.环境变量配置 (1)用打开后下面的"系统变量"进行配置,下面的名字为Path: (2)举例,如果安装ping.exe:而且ping.exe在C:\lianghua\ping.e ...

  8. Vue3中setup语法糖学习

    目录 1,前言 2,基本语法 2,响应式 3,组件使用 3.1,动态组件 3.2,递归组件 4,自定义指令 5,props 5.1,TypeScript支持 6,emit 6.1,TypeScript ...

  9. SQL注入 - SQLi-Labs靶场过关记录

    Less-1 1.看报错类型,确定注入点 ?id=1' order by 4--++ 2.确定数据库 ?id=-1' union select 1,2,3--++ 3.查看数据库 ?id=-1' un ...

  10. php 23种设计模式 - 备忘录模式

    备忘录模式 备忘录模式(Memento Pattern)保存一个对象的某个状态,以便在适当的时候恢复对象.备忘录模式属于行为型模式. 介绍 意图:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该 ...