因配置的关系,导致 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. Qunar风控安全产品的探索之路

    李建威.2017年7月以春招实习生的身份加入去哪儿网,毕业后一直在从事抓取与反抓取相关工作,先后负责搭建过智能打码.设备指纹以及环境检测等服务.目前主要负责反爬风控的基础安全产品建设.对各类作弊原理感 ...

  2. 在 WPF 客户端实现 AOP 和接口缓存

    随着业务越来越复杂,最近决定把一些频繁查询但是数据不会怎么变更的接口做一下缓存,这种功能一般用 AOP 就能实现了,找了一下客户端又没现成的直接可以用,嗐,就只能自己开发了. 代理模式和AOP 理解代 ...

  3. RENIX使用模板创建报文——网络测试仪实操

    一.简介 RENIX内置多种报文模板,可以直接用来创建一个报文,节省时间 二.操作步骤 1.准备工作:连接机框,占用端口 2.新建或者编辑流 3.切换到 数据包/编辑 界面:点击创建新协议报文 4.在 ...

  4. Gerrit的用法及与gitlab的区别

    来到一个新的团队,开发的代码被同事覆盖了.找同事核实,同事却说根本没有看到我的代码.经过一番沟通了解,原来他们的代码没有直接在gitlab上操作,而是先提交到gerrit,然后在提交到git.但是代码 ...

  5. Dashboard究竟是什么,它在数据展示上的优势何在?

    ​相信很多人在做数据分析工作的时候都遇到这种情况,辛辛苦苦做出来的数据报表老板看了嫌弃不够直观.生动,客户看了嫌弃不够高大上.这个时候不妨尝试一下使用Dashboard来展示报表数据,可能有些人对Da ...

  6. 案例六:shell脚本监控httpd服务80端口状态

    这里是举例监控httpd服务端口状态,根据端口判断服务器是否启动,如果没有启动则脚本自动拉起服务,如果服务正在运行则退出脚本程序:如果换成别的服务端口也可以,但是脚本程序需要做调整. #!/bin/b ...

  7. Flume介绍安装使用

    APache Flume官网:http://flume.apache.org/releases/content/1.9.0/FlumeUserGuide.html#memory-channel 目录 ...

  8. keepass实践

    参考软件教程 篇一:从入门到熟练:KeePass全网最详使用指南 运行之后快到来不及截图,就是这么速

  9. php 23种设计模式 - 观察者模式

    观察者模式 某个对象可以被设置为是可观察的,只要通过某种方式允许其他对象注册为观察者.每当被观察的对象改变时,会发送信息给观察者. 介绍 意图:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改 ...

  10. Docker 部署xxl-job 报错:xxl-rpc remoting error(connect timed out), for url : xxxxxx

    使用Docker 部署的xxl-job,当调度中心和执行器部署在不同的容器内,此时xxl-job调用执行器的服务就会报: address:http://172.0.0.1:8841/ code:500 ...